@surdeddd/bottom-sheet 0.13.0 → 0.20.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 +46 -0
- package/dist/{BottomSheetCore-D16lsa6g.d.ts → BottomSheetCore-Cgn8b_6A.d.ts} +36 -2
- package/dist/{BottomSheetCore-CsIjyq7C.d.cts → BottomSheetCore-VPJZcKcg.d.cts} +36 -2
- package/dist/{BottomSheetEngine-BYjAVrmd.d.cts → BottomSheetEngine-B8C2CwF9.d.cts} +1 -1
- package/dist/{BottomSheetEngine-YuCNugZn.d.ts → BottomSheetEngine-DwYR_ygJ.d.ts} +1 -1
- package/dist/core.cjs +328 -33
- package/dist/core.d.cts +2 -2
- package/dist/core.d.ts +2 -2
- package/dist/core.js +328 -33
- package/dist/debug.d.cts +1 -1
- package/dist/debug.d.ts +1 -1
- package/dist/element.cjs +404 -108
- 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 +404 -108
- package/dist/features.cjs +6 -50
- package/dist/features.d.cts +4 -4
- package/dist/features.d.ts +4 -4
- package/dist/features.js +6 -50
- package/dist/index-CnfbOKx0.d.cts +9 -0
- package/dist/index-DcMkhXAy.d.ts +9 -0
- package/dist/index.cjs +335 -829
- package/dist/index.d.cts +44 -47
- package/dist/index.d.ts +44 -47
- package/dist/index.js +336 -816
- package/dist/integrations/formik.d.cts +1 -1
- package/dist/integrations/formik.d.ts +1 -1
- package/dist/integrations/react-hook-form.d.cts +1 -1
- package/dist/integrations/react-hook-form.d.ts +1 -1
- package/dist/overlay.cjs +5 -5
- package/dist/overlay.js +5 -5
- package/dist/preact.d.cts +2 -2
- package/dist/preact.d.ts +2 -2
- package/dist/qwik-lib/index.qwik.cjs +323 -83
- package/dist/qwik-lib/index.qwik.mjs +323 -83
- package/dist/qwik.cjs +342 -83
- package/dist/qwik.d.cts +4 -2
- package/dist/qwik.d.ts +4 -2
- package/dist/qwik.js +342 -83
- package/dist/react.cjs +347 -85
- package/dist/react.d.cts +3 -4
- package/dist/react.d.ts +3 -4
- package/dist/react.js +347 -85
- package/dist/solid.cjs +348 -83
- package/dist/solid.d.cts +37 -1
- package/dist/solid.d.ts +37 -1
- package/dist/solid.js +348 -83
- package/dist/solid.source.jsx +356 -83
- package/dist/styles.css +24 -4
- package/dist/svelte-core.cjs +334 -83
- package/dist/svelte-core.js +334 -83
- package/dist/svelte-src/BottomSheet.svelte +14 -0
- package/dist/svelte.cjs +344 -83
- package/dist/svelte.d.cts +2 -0
- package/dist/svelte.d.ts +2 -0
- package/dist/svelte.js +344 -83
- package/dist/vue.cjs +350 -83
- package/dist/vue.js +350 -83
- package/dist/webgl.cjs +673 -0
- package/dist/webgl.d.cts +17 -0
- package/dist/webgl.d.ts +17 -0
- package/dist/webgl.js +671 -0
- package/package.json +64 -40
- package/dist/index-DdYLOIIT.d.ts +0 -15
- package/dist/index-dfrzw-lI.d.cts +0 -15
package/dist/index.cjs
CHANGED
|
@@ -4,7 +4,7 @@ var __defProp = Object.defineProperty;
|
|
|
4
4
|
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
5
5
|
var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
|
6
6
|
|
|
7
|
-
// src/core/lifecycle/
|
|
7
|
+
// src/core/lifecycle/sheet-stack.ts
|
|
8
8
|
var BASE_Z = 100;
|
|
9
9
|
var STEP = 10;
|
|
10
10
|
var SheetStack = class {
|
|
@@ -86,12 +86,6 @@ function buildTransformTemplate(axis) {
|
|
|
86
86
|
return (offset) => `translate3d(${offset}px, 0, 0)`;
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
|
-
var CLOSED_TRANSFORM = {
|
|
90
|
-
bottom: "translate3d(0, 100%, 0)",
|
|
91
|
-
top: "translate3d(0, -100%, 0)",
|
|
92
|
-
left: "translate3d(-100%, 0, 0)",
|
|
93
|
-
right: "translate3d(100%, 0, 0)"
|
|
94
|
-
};
|
|
95
89
|
var layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
|
|
96
90
|
|
|
97
91
|
// src/core/primitives/instance-id.ts
|
|
@@ -135,7 +129,7 @@ function createEventBus() {
|
|
|
135
129
|
};
|
|
136
130
|
}
|
|
137
131
|
|
|
138
|
-
// src/core/primitives/
|
|
132
|
+
// src/core/primitives/css-length.ts
|
|
139
133
|
var probe = null;
|
|
140
134
|
var PROBE_ATTR = "data-bs-probe";
|
|
141
135
|
var ensureProbe = (axis) => {
|
|
@@ -189,7 +183,7 @@ var resolveSnap = (point, mode, measureFit) => {
|
|
|
189
183
|
return Math.max(0, el.getBoundingClientRect().width);
|
|
190
184
|
};
|
|
191
185
|
|
|
192
|
-
// src/core/primitives/
|
|
186
|
+
// src/core/primitives/dev-warn.ts
|
|
193
187
|
function devWarn(...args) {
|
|
194
188
|
if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
|
|
195
189
|
console.warn(...args);
|
|
@@ -321,6 +315,11 @@ var SnapResolver = class {
|
|
|
321
315
|
this.raw = raw;
|
|
322
316
|
this.recompute();
|
|
323
317
|
}
|
|
318
|
+
setMode(mode) {
|
|
319
|
+
if (mode === this.mode) return;
|
|
320
|
+
this.mode = mode;
|
|
321
|
+
this.recompute();
|
|
322
|
+
}
|
|
324
323
|
setAllowedIds(ids) {
|
|
325
324
|
this.allowedIds = ids;
|
|
326
325
|
this.rangeCache = null;
|
|
@@ -904,6 +903,11 @@ var ScrimController = class {
|
|
|
904
903
|
if (this.isDestroyed()) return;
|
|
905
904
|
this.applyScrimStyles({ interactive });
|
|
906
905
|
}
|
|
906
|
+
setSheetMode(mode) {
|
|
907
|
+
if (this.isDestroyed() || mode === this.mode) return;
|
|
908
|
+
this.mode = mode;
|
|
909
|
+
this.invalidateOpacityCache();
|
|
910
|
+
}
|
|
907
911
|
setScrimMode(mode, applySize) {
|
|
908
912
|
if (this.isDestroyed()) return;
|
|
909
913
|
if (mode === this.scrimMode) return;
|
|
@@ -1522,7 +1526,7 @@ var AnimationRunner = class {
|
|
|
1522
1526
|
}
|
|
1523
1527
|
};
|
|
1524
1528
|
|
|
1525
|
-
// src/core/lifecycle/
|
|
1529
|
+
// src/core/lifecycle/focus-trap.ts
|
|
1526
1530
|
var FOCUSABLE = [
|
|
1527
1531
|
"a[href]",
|
|
1528
1532
|
"area[href]",
|
|
@@ -1640,7 +1644,7 @@ var installFocusTrap = (container, options = {}) => {
|
|
|
1640
1644
|
};
|
|
1641
1645
|
};
|
|
1642
1646
|
|
|
1643
|
-
// src/core/lifecycle/
|
|
1647
|
+
// src/core/lifecycle/scroll-lock.ts
|
|
1644
1648
|
var lockCount = 0;
|
|
1645
1649
|
var savedStyles = null;
|
|
1646
1650
|
var lockBodyScroll = () => {
|
|
@@ -1822,30 +1826,47 @@ var SampleRing = class {
|
|
|
1822
1826
|
this.size = 0;
|
|
1823
1827
|
}
|
|
1824
1828
|
};
|
|
1825
|
-
var installGestures = (handle, mode, callbacks) => {
|
|
1829
|
+
var installGestures = (handle, mode, callbacks, options = {}) => {
|
|
1826
1830
|
let activePointerId = null;
|
|
1827
1831
|
let activePointerType = "touch";
|
|
1828
1832
|
let startCoord = 0;
|
|
1833
|
+
let startCross = 0;
|
|
1829
1834
|
let lastCoord = 0;
|
|
1835
|
+
let pendingStart = false;
|
|
1830
1836
|
const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
|
|
1831
1837
|
const MAX_SAMPLES = 32;
|
|
1832
1838
|
const samples = new SampleRing(MAX_SAMPLES);
|
|
1833
1839
|
const axis = isAxisVertical(mode) ? "Y" : "X";
|
|
1834
1840
|
const sign = mode === "bottom" || mode === "right" ? -1 : 1;
|
|
1835
1841
|
const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
|
|
1842
|
+
const crossOf = (e) => axis === "Y" ? e.clientX : e.clientY;
|
|
1843
|
+
const capture = (pointerId) => {
|
|
1844
|
+
try {
|
|
1845
|
+
handle.setPointerCapture(pointerId);
|
|
1846
|
+
} catch {
|
|
1847
|
+
}
|
|
1848
|
+
};
|
|
1849
|
+
const releaseTracking = () => {
|
|
1850
|
+
activePointerId = null;
|
|
1851
|
+
pendingStart = false;
|
|
1852
|
+
samples.reset();
|
|
1853
|
+
};
|
|
1836
1854
|
const onPointerDown = (e) => {
|
|
1837
1855
|
if (activePointerId !== null) return;
|
|
1838
1856
|
if (e.button !== void 0 && e.button !== 0) return;
|
|
1857
|
+
if (options.shouldStart && !options.shouldStart(e)) return;
|
|
1839
1858
|
activePointerId = e.pointerId;
|
|
1840
1859
|
activePointerType = e.pointerType || "touch";
|
|
1841
1860
|
startCoord = coordOf(e);
|
|
1861
|
+
startCross = crossOf(e);
|
|
1842
1862
|
lastCoord = startCoord;
|
|
1843
1863
|
samples.reset();
|
|
1844
1864
|
samples.push(e.timeStamp, startCoord);
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1865
|
+
if (options.deferStart) {
|
|
1866
|
+
pendingStart = true;
|
|
1867
|
+
return;
|
|
1848
1868
|
}
|
|
1869
|
+
capture(e.pointerId);
|
|
1849
1870
|
callbacks.onStart(startCoord, activePointerType);
|
|
1850
1871
|
};
|
|
1851
1872
|
const onPointerMove = (e) => {
|
|
@@ -1853,6 +1874,22 @@ var installGestures = (handle, mode, callbacks) => {
|
|
|
1853
1874
|
const coord = coordOf(e);
|
|
1854
1875
|
const rawDelta = coord - startCoord;
|
|
1855
1876
|
const delta = rawDelta * sign;
|
|
1877
|
+
if (pendingStart) {
|
|
1878
|
+
const verdict = options.deferStart(e, delta, crossOf(e) - startCross);
|
|
1879
|
+
if (verdict === false) {
|
|
1880
|
+
releaseTracking();
|
|
1881
|
+
return;
|
|
1882
|
+
}
|
|
1883
|
+
if (verdict !== true) return;
|
|
1884
|
+
pendingStart = false;
|
|
1885
|
+
startCoord = coord;
|
|
1886
|
+
lastCoord = coord;
|
|
1887
|
+
samples.reset();
|
|
1888
|
+
samples.push(e.timeStamp, coord);
|
|
1889
|
+
capture(e.pointerId);
|
|
1890
|
+
callbacks.onStart(startCoord, activePointerType);
|
|
1891
|
+
return;
|
|
1892
|
+
}
|
|
1856
1893
|
lastCoord = coord;
|
|
1857
1894
|
samples.push(e.timeStamp, coord);
|
|
1858
1895
|
const cutoff = e.timeStamp - VELOCITY_WINDOW_MS(activePointerType);
|
|
@@ -1861,6 +1898,10 @@ var installGestures = (handle, mode, callbacks) => {
|
|
|
1861
1898
|
};
|
|
1862
1899
|
const finishGesture = (e) => {
|
|
1863
1900
|
if (e.pointerId !== activePointerId) return;
|
|
1901
|
+
if (pendingStart) {
|
|
1902
|
+
releaseTracking();
|
|
1903
|
+
return;
|
|
1904
|
+
}
|
|
1864
1905
|
const rawDelta = lastCoord - startCoord;
|
|
1865
1906
|
const delta = rawDelta * sign;
|
|
1866
1907
|
let velocity = 0;
|
|
@@ -1883,28 +1924,31 @@ var installGestures = (handle, mode, callbacks) => {
|
|
|
1883
1924
|
};
|
|
1884
1925
|
const onPointerCancel = (e) => {
|
|
1885
1926
|
if (e.pointerId !== activePointerId) return;
|
|
1886
|
-
|
|
1887
|
-
|
|
1927
|
+
const wasPending = pendingStart;
|
|
1928
|
+
releaseTracking();
|
|
1929
|
+
if (wasPending) return;
|
|
1888
1930
|
callbacks.onCancel?.();
|
|
1889
1931
|
};
|
|
1890
1932
|
handle.addEventListener("pointerdown", onPointerDown);
|
|
1891
1933
|
handle.addEventListener("pointermove", onPointerMove);
|
|
1892
1934
|
handle.addEventListener("pointerup", finishGesture);
|
|
1893
1935
|
handle.addEventListener("pointercancel", onPointerCancel);
|
|
1936
|
+
const managesTouchAction = options.manageTouchAction !== false;
|
|
1894
1937
|
const prevTouchAction = handle.style.touchAction;
|
|
1895
|
-
|
|
1938
|
+
if (managesTouchAction) {
|
|
1939
|
+
handle.style.touchAction = isAxisVertical(mode) ? "pan-x" : "pan-y";
|
|
1940
|
+
}
|
|
1896
1941
|
return () => {
|
|
1897
1942
|
handle.removeEventListener("pointerdown", onPointerDown);
|
|
1898
1943
|
handle.removeEventListener("pointermove", onPointerMove);
|
|
1899
1944
|
handle.removeEventListener("pointerup", finishGesture);
|
|
1900
1945
|
handle.removeEventListener("pointercancel", onPointerCancel);
|
|
1901
|
-
handle.style.touchAction = prevTouchAction;
|
|
1946
|
+
if (managesTouchAction) handle.style.touchAction = prevTouchAction;
|
|
1902
1947
|
if (activePointerId !== null && handle.hasPointerCapture(activePointerId)) {
|
|
1903
1948
|
handle.releasePointerCapture(activePointerId);
|
|
1904
1949
|
}
|
|
1905
1950
|
};
|
|
1906
1951
|
};
|
|
1907
|
-
var attachGestures = installGestures;
|
|
1908
1952
|
|
|
1909
1953
|
// src/core/primitives/rubber-band.ts
|
|
1910
1954
|
function rubberBand(overshoot, maxAxisSize) {
|
|
@@ -2018,7 +2062,7 @@ var GestureController = class {
|
|
|
2018
2062
|
const restoreTo = this.dragStartSize;
|
|
2019
2063
|
void this.deps.animateTo(restoreTo, 0);
|
|
2020
2064
|
}
|
|
2021
|
-
});
|
|
2065
|
+
}, this.deps.gestureOptions);
|
|
2022
2066
|
return this.detach;
|
|
2023
2067
|
}
|
|
2024
2068
|
forceClearDragState() {
|
|
@@ -2030,6 +2074,74 @@ var GestureController = class {
|
|
|
2030
2074
|
}
|
|
2031
2075
|
};
|
|
2032
2076
|
|
|
2077
|
+
// src/core/primitives/drag-zones.ts
|
|
2078
|
+
var DRAG_ZONE_SELECTOR = "[data-bs-drag]";
|
|
2079
|
+
var NO_DRAG_SELECTOR = "[data-bs-no-drag]";
|
|
2080
|
+
var asElement = (target) => {
|
|
2081
|
+
const candidate = target;
|
|
2082
|
+
return candidate && typeof candidate.closest === "function" ? candidate : null;
|
|
2083
|
+
};
|
|
2084
|
+
function isDragAllowedFrom(target, mode) {
|
|
2085
|
+
const el = asElement(target);
|
|
2086
|
+
if (!el) return mode !== "zones";
|
|
2087
|
+
if (el.closest(NO_DRAG_SELECTOR)) return false;
|
|
2088
|
+
if (mode === "zones") return el.closest(DRAG_ZONE_SELECTOR) !== null;
|
|
2089
|
+
return true;
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
// src/core/primitives/content-gesture.ts
|
|
2093
|
+
var CONTENT_DRAG_SLOP = 6;
|
|
2094
|
+
function decideContentGesture(input) {
|
|
2095
|
+
const slop = input.slop ?? CONTENT_DRAG_SLOP;
|
|
2096
|
+
const cross = input.crossDelta ?? 0;
|
|
2097
|
+
const sharesScrollAxis = input.sharesScrollAxis ?? true;
|
|
2098
|
+
if (!sharesScrollAxis) {
|
|
2099
|
+
if (Math.abs(input.delta) < slop && Math.abs(cross) < slop) return "pending";
|
|
2100
|
+
if (Math.abs(input.delta) <= Math.abs(cross)) return "scroll";
|
|
2101
|
+
return "drag";
|
|
2102
|
+
}
|
|
2103
|
+
if (Math.abs(input.delta) < slop) return "pending";
|
|
2104
|
+
if (input.scrollTop > 0) return "scroll";
|
|
2105
|
+
if (input.delta > 0 && input.atMaxSnap) return "scroll";
|
|
2106
|
+
return "drag";
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
// src/core/primitives/logical-mode.ts
|
|
2110
|
+
var isLogicalMode = (mode) => mode === "start" || mode === "end";
|
|
2111
|
+
var readDirection = (el) => {
|
|
2112
|
+
if (!el) return "ltr";
|
|
2113
|
+
if (typeof getComputedStyle === "function") {
|
|
2114
|
+
try {
|
|
2115
|
+
if (getComputedStyle(el).direction === "rtl") return "rtl";
|
|
2116
|
+
} catch {
|
|
2117
|
+
}
|
|
2118
|
+
}
|
|
2119
|
+
try {
|
|
2120
|
+
const marked = el.closest?.("[dir]");
|
|
2121
|
+
if (marked) {
|
|
2122
|
+
return marked.getAttribute("dir")?.toLowerCase() === "rtl" ? "rtl" : "ltr";
|
|
2123
|
+
}
|
|
2124
|
+
} catch {
|
|
2125
|
+
}
|
|
2126
|
+
return "ltr";
|
|
2127
|
+
};
|
|
2128
|
+
var resolveMode = (mode, el) => {
|
|
2129
|
+
if (!isLogicalMode(mode)) return mode;
|
|
2130
|
+
const rtl = readDirection(el) === "rtl";
|
|
2131
|
+
if (mode === "start") return rtl ? "right" : "left";
|
|
2132
|
+
return rtl ? "left" : "right";
|
|
2133
|
+
};
|
|
2134
|
+
|
|
2135
|
+
// src/core/primitives/touch-scroll-guard.ts
|
|
2136
|
+
function installTouchScrollGuard(surface, isDragging) {
|
|
2137
|
+
const onTouchMove = (e) => {
|
|
2138
|
+
if (!isDragging()) return;
|
|
2139
|
+
if (e.cancelable) e.preventDefault();
|
|
2140
|
+
};
|
|
2141
|
+
surface.addEventListener("touchmove", onTouchMove, { passive: false });
|
|
2142
|
+
return () => surface.removeEventListener("touchmove", onTouchMove);
|
|
2143
|
+
}
|
|
2144
|
+
|
|
2033
2145
|
// src/core/primitives/aria-slider-writer.ts
|
|
2034
2146
|
var AriaSliderWriter = class {
|
|
2035
2147
|
constructor(handle, mode) {
|
|
@@ -2382,9 +2494,11 @@ function resolveEngineOptions(opts, extras) {
|
|
|
2382
2494
|
}
|
|
2383
2495
|
}
|
|
2384
2496
|
return {
|
|
2385
|
-
mode: opts.mode ?? "bottom",
|
|
2497
|
+
mode: resolveMode(opts.mode ?? "bottom", opts.element),
|
|
2386
2498
|
flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
|
|
2387
2499
|
dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
|
|
2500
|
+
dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
|
|
2501
|
+
dragFromContent: opts.dragFromContent ?? true,
|
|
2388
2502
|
rubberBandEnabled: opts.rubberBand ?? true,
|
|
2389
2503
|
closeOnBack: opts.closeOnBack ?? false,
|
|
2390
2504
|
persistent: opts.persistent ?? false,
|
|
@@ -2470,6 +2584,8 @@ var BottomSheetCore = class {
|
|
|
2470
2584
|
__publicField(this, "mode");
|
|
2471
2585
|
__publicField(this, "flickVelocity");
|
|
2472
2586
|
__publicField(this, "dragThreshold");
|
|
2587
|
+
__publicField(this, "dragFromMode");
|
|
2588
|
+
__publicField(this, "dragFromContentDefault");
|
|
2473
2589
|
__publicField(this, "rubberBandEnabled");
|
|
2474
2590
|
__publicField(this, "scrim");
|
|
2475
2591
|
__publicField(this, "aria");
|
|
@@ -2482,13 +2598,18 @@ var BottomSheetCore = class {
|
|
|
2482
2598
|
__publicField(this, "disableDragFlag");
|
|
2483
2599
|
__publicField(this, "closeOnRouteChange");
|
|
2484
2600
|
__publicField(this, "maxHeight");
|
|
2601
|
+
__publicField(this, "maxHeightDeps");
|
|
2485
2602
|
__publicField(this, "snapPointsRaw");
|
|
2486
2603
|
__publicField(this, "snaps");
|
|
2487
2604
|
__publicField(this, "activeId");
|
|
2488
2605
|
__publicField(this, "size", 0);
|
|
2489
2606
|
__publicField(this, "gesture");
|
|
2607
|
+
__publicField(this, "contentGesture");
|
|
2608
|
+
__publicField(this, "detachSheetGesture", null);
|
|
2609
|
+
__publicField(this, "detachSliderKeyboard", null);
|
|
2490
2610
|
__publicField(this, "rootEl", null);
|
|
2491
2611
|
__publicField(this, "destroyed", false);
|
|
2612
|
+
__publicField(this, "restClosed", false);
|
|
2492
2613
|
__publicField(this, "currentViewTransition", null);
|
|
2493
2614
|
__publicField(this, "currentAbort", new AbortController());
|
|
2494
2615
|
__publicField(this, "sizeWriteSentinel", new WriteSentinel());
|
|
@@ -2537,10 +2658,13 @@ var BottomSheetCore = class {
|
|
|
2537
2658
|
this.screenComponent = opts.scrim ?? opts.screenComponent;
|
|
2538
2659
|
this.scrimParent = this.screenComponent?.parentElement ?? null;
|
|
2539
2660
|
this.mode = resolved.mode;
|
|
2661
|
+
this.element.dataset.mode = this.mode;
|
|
2540
2662
|
this.transformTemplate = buildTransformTemplate(this.mode);
|
|
2541
2663
|
this.aria = new AriaSliderWriter(this.handle, this.mode);
|
|
2542
2664
|
this.flickVelocity = resolved.flickVelocity;
|
|
2543
2665
|
this.dragThreshold = resolved.dragThreshold;
|
|
2666
|
+
this.dragFromMode = resolved.dragFrom;
|
|
2667
|
+
this.dragFromContentDefault = resolved.dragFromContent;
|
|
2544
2668
|
this.rubberBandEnabled = resolved.rubberBandEnabled;
|
|
2545
2669
|
this.scrim = new ScrimController(
|
|
2546
2670
|
{
|
|
@@ -2567,7 +2691,7 @@ var BottomSheetCore = class {
|
|
|
2567
2691
|
getRootEl: () => this.rootEl,
|
|
2568
2692
|
applySize: (size) => this.applySize(size),
|
|
2569
2693
|
getSize: () => this.size,
|
|
2570
|
-
isDragging: () => this.
|
|
2694
|
+
isDragging: () => this.isDraggingAny(),
|
|
2571
2695
|
applyAux: (size) => this.applySize(size, true),
|
|
2572
2696
|
getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
|
|
2573
2697
|
},
|
|
@@ -2601,7 +2725,7 @@ var BottomSheetCore = class {
|
|
|
2601
2725
|
auditVhUsage(this.snapPointsRaw);
|
|
2602
2726
|
this.auditDuplicateSnapIds(this.snapPointsRaw);
|
|
2603
2727
|
this.rootEl = this.element.closest(".bs-root");
|
|
2604
|
-
this.
|
|
2728
|
+
this.maxHeightDeps = {
|
|
2605
2729
|
element: this.element,
|
|
2606
2730
|
mode: this.mode,
|
|
2607
2731
|
getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
|
|
@@ -2609,7 +2733,8 @@ var BottomSheetCore = class {
|
|
|
2609
2733
|
this.snaps.setMaxAxisSize(size);
|
|
2610
2734
|
},
|
|
2611
2735
|
recompute: () => this.recompute()
|
|
2612
|
-
}
|
|
2736
|
+
};
|
|
2737
|
+
this.maxHeight = createMaxHeightController(this.maxHeightDeps);
|
|
2613
2738
|
this.fitDeps = {
|
|
2614
2739
|
element: this.element,
|
|
2615
2740
|
scrollContainer: this.scrollContainer,
|
|
@@ -2628,6 +2753,7 @@ var BottomSheetCore = class {
|
|
|
2628
2753
|
const initial = this.snaps.findById(this.activeId);
|
|
2629
2754
|
if (initial) this.size = initial.size;
|
|
2630
2755
|
this.applySize(this.size);
|
|
2756
|
+
this.setRestClosed(this.size === 0);
|
|
2631
2757
|
this.updateAriaSlider();
|
|
2632
2758
|
this.scrollCache = createScrollCache({
|
|
2633
2759
|
scrollContainer: this.scrollContainer,
|
|
@@ -2658,7 +2784,7 @@ var BottomSheetCore = class {
|
|
|
2658
2784
|
(p) => p.size === "fit" || p.size === "content"
|
|
2659
2785
|
),
|
|
2660
2786
|
isDestroyed: () => this.destroyed,
|
|
2661
|
-
isDragging: () => this.
|
|
2787
|
+
isDragging: () => this.isDraggingAny(),
|
|
2662
2788
|
recompute: () => this.recompute()
|
|
2663
2789
|
})
|
|
2664
2790
|
);
|
|
@@ -2684,7 +2810,7 @@ var BottomSheetCore = class {
|
|
|
2684
2810
|
autoCollapseAfter
|
|
2685
2811
|
},
|
|
2686
2812
|
isDestroyed: () => this.destroyed,
|
|
2687
|
-
isDragging: () => this.
|
|
2813
|
+
isDragging: () => this.isDraggingAny(),
|
|
2688
2814
|
isAnimating: () => this.animation.isAnimating,
|
|
2689
2815
|
isTopSheet: () => this.isTopSheet,
|
|
2690
2816
|
isVerticalAxis: () => this.mode === "bottom" || this.mode === "top",
|
|
@@ -2714,6 +2840,7 @@ var BottomSheetCore = class {
|
|
|
2714
2840
|
void this.snapTo(id);
|
|
2715
2841
|
},
|
|
2716
2842
|
close: (reason) => this.close(reason),
|
|
2843
|
+
attachDragSurface: (surface, kind) => this.attachDragSurface(surface, kind),
|
|
2717
2844
|
on: (event, fn) => this.on(event, fn),
|
|
2718
2845
|
addTeardown: (fn) => this.teardowns.add(fn)
|
|
2719
2846
|
};
|
|
@@ -2742,7 +2869,7 @@ var BottomSheetCore = class {
|
|
|
2742
2869
|
return {
|
|
2743
2870
|
size: this.size,
|
|
2744
2871
|
activeId: this.activeId,
|
|
2745
|
-
isDragging: this.
|
|
2872
|
+
isDragging: this.isDraggingAny(),
|
|
2746
2873
|
isAnimating: this.animation.isAnimating,
|
|
2747
2874
|
progress: this.computeProgress(this.size)
|
|
2748
2875
|
};
|
|
@@ -2862,9 +2989,16 @@ var BottomSheetCore = class {
|
|
|
2862
2989
|
progress: this.computeProgress(this.size)
|
|
2863
2990
|
});
|
|
2864
2991
|
if (withHaptic) this.haptic();
|
|
2992
|
+
this.setRestClosed(targetSize === 0);
|
|
2865
2993
|
if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
|
|
2866
2994
|
if (targetSize === 0) this.emitCloseSequence();
|
|
2867
2995
|
}
|
|
2996
|
+
setRestClosed(closed) {
|
|
2997
|
+
if (closed === this.restClosed) return;
|
|
2998
|
+
this.restClosed = closed;
|
|
2999
|
+
if (closed) this.element.setAttribute("data-bs-rest", "closed");
|
|
3000
|
+
else this.element.removeAttribute("data-bs-rest");
|
|
3001
|
+
}
|
|
2868
3002
|
emitOpenSequence(id) {
|
|
2869
3003
|
this.emit("open", { id });
|
|
2870
3004
|
this.handleOpen();
|
|
@@ -2920,6 +3054,51 @@ var BottomSheetCore = class {
|
|
|
2920
3054
|
if (this.destroyed) return;
|
|
2921
3055
|
this.disableDragFlag = value;
|
|
2922
3056
|
}
|
|
3057
|
+
setDragFromContent(value) {
|
|
3058
|
+
if (this.destroyed) return;
|
|
3059
|
+
this.dragFromContentDefault = value;
|
|
3060
|
+
}
|
|
3061
|
+
setDragFrom(mode) {
|
|
3062
|
+
if (this.destroyed || mode === this.dragFromMode) return;
|
|
3063
|
+
this.gesture?.forceClearDragState();
|
|
3064
|
+
this.detachSheetGesture?.();
|
|
3065
|
+
this.dragFromMode = mode;
|
|
3066
|
+
this.mountSheetGesture();
|
|
3067
|
+
}
|
|
3068
|
+
getDragFrom() {
|
|
3069
|
+
return this.dragFromMode;
|
|
3070
|
+
}
|
|
3071
|
+
setMode(mode) {
|
|
3072
|
+
if (this.destroyed) return;
|
|
3073
|
+
const next = resolveMode(mode, this.element);
|
|
3074
|
+
if (next === this.mode) return;
|
|
3075
|
+
const wasVertical = this.mode === "bottom" || this.mode === "top";
|
|
3076
|
+
const nowVertical = next === "bottom" || next === "top";
|
|
3077
|
+
this.gesture?.forceClearDragState();
|
|
3078
|
+
this.detachSheetGesture?.();
|
|
3079
|
+
this.animation.cancel();
|
|
3080
|
+
this.element.style.removeProperty(layoutAxis(this.mode));
|
|
3081
|
+
this.mode = next;
|
|
3082
|
+
this.element.dataset.mode = next;
|
|
3083
|
+
this.transformTemplate = buildTransformTemplate(next);
|
|
3084
|
+
this.maxHeightDeps.mode = next;
|
|
3085
|
+
this.fitDeps.mode = next;
|
|
3086
|
+
this.snaps.setMode(next);
|
|
3087
|
+
this.scrim.setSheetMode(next);
|
|
3088
|
+
if (wasVertical !== nowVertical) {
|
|
3089
|
+
this.aria = new AriaSliderWriter(this.handle, next);
|
|
3090
|
+
}
|
|
3091
|
+
this.detachSliderKeyboard?.();
|
|
3092
|
+
this.mountSliderKeyboard();
|
|
3093
|
+
this.mountSheetGesture();
|
|
3094
|
+
this.recompute();
|
|
3095
|
+
const active = this.snaps.findById(this.activeId);
|
|
3096
|
+
if (active) this.applySize(active.size);
|
|
3097
|
+
this.updateAriaSlider();
|
|
3098
|
+
}
|
|
3099
|
+
getMode() {
|
|
3100
|
+
return this.mode;
|
|
3101
|
+
}
|
|
2923
3102
|
isTop() {
|
|
2924
3103
|
return this.isTopSheet;
|
|
2925
3104
|
}
|
|
@@ -3074,12 +3253,24 @@ var BottomSheetCore = class {
|
|
|
3074
3253
|
auditVhUsage(points);
|
|
3075
3254
|
this.auditDuplicateSnapIds(points);
|
|
3076
3255
|
this.snaps.setRaw(points);
|
|
3077
|
-
if (allowed)
|
|
3256
|
+
if (allowed) {
|
|
3257
|
+
this.snaps.setAllowedIds(allowed);
|
|
3258
|
+
} else {
|
|
3259
|
+
const present = this.snaps.getResolvedSnaps().map((s) => s.id);
|
|
3260
|
+
const kept = this.snaps.getAllowedIds().filter((id) => present.includes(id));
|
|
3261
|
+
this.snaps.setAllowedIds(kept.length ? kept : present);
|
|
3262
|
+
}
|
|
3078
3263
|
this.scrollCache.clear();
|
|
3079
3264
|
this.scrim.invalidateOpacityCache();
|
|
3080
3265
|
const current = this.snaps.findById(this.activeId);
|
|
3081
3266
|
if (current) {
|
|
3082
3267
|
this.applySize(current.size);
|
|
3268
|
+
} else {
|
|
3269
|
+
const fallback = this.snaps.getResolvedSnaps().find((s) => this.snaps.getAllowedIds().includes(s.id)) ?? this.snaps.getResolvedSnaps()[0];
|
|
3270
|
+
if (fallback) {
|
|
3271
|
+
this.activeId = fallback.id;
|
|
3272
|
+
this.applySize(fallback.size);
|
|
3273
|
+
}
|
|
3083
3274
|
}
|
|
3084
3275
|
this.updateAriaSlider();
|
|
3085
3276
|
}
|
|
@@ -3089,7 +3280,7 @@ var BottomSheetCore = class {
|
|
|
3089
3280
|
this.snaps.recompute();
|
|
3090
3281
|
this.maxHeight.clampTo();
|
|
3091
3282
|
this.scrim.invalidateOpacityCache();
|
|
3092
|
-
if (this.
|
|
3283
|
+
if (this.isDraggingAny()) return;
|
|
3093
3284
|
this.healActiveSnap();
|
|
3094
3285
|
}
|
|
3095
3286
|
healActiveSnap() {
|
|
@@ -3111,6 +3302,8 @@ var BottomSheetCore = class {
|
|
|
3111
3302
|
this.bus.clear();
|
|
3112
3303
|
this.animation.cancel();
|
|
3113
3304
|
this.gesture?.forceClearDragState();
|
|
3305
|
+
this.contentGesture?.forceClearDragState();
|
|
3306
|
+
this.setRestClosed(false);
|
|
3114
3307
|
this.teardowns.drain();
|
|
3115
3308
|
this.scrim.destroy();
|
|
3116
3309
|
this.animation.destroy();
|
|
@@ -3223,11 +3416,12 @@ var BottomSheetCore = class {
|
|
|
3223
3416
|
const scale = Math.max(1 - depth * 0.04, 0.86);
|
|
3224
3417
|
this.element.style.scale = scale === 1 ? "" : String(scale);
|
|
3225
3418
|
}
|
|
3226
|
-
|
|
3227
|
-
|
|
3228
|
-
handle:
|
|
3419
|
+
buildGestureDeps(surface, gestureOptions) {
|
|
3420
|
+
return {
|
|
3421
|
+
handle: surface,
|
|
3229
3422
|
element: this.element,
|
|
3230
3423
|
mode: this.mode,
|
|
3424
|
+
gestureOptions,
|
|
3231
3425
|
getRoot: () => this.rootEl,
|
|
3232
3426
|
getDragContext: () => {
|
|
3233
3427
|
const buf = this.dragContextBuf;
|
|
@@ -3246,8 +3440,90 @@ var BottomSheetCore = class {
|
|
|
3246
3440
|
settleAfterDrag: (delta, velocity, kind) => this.settleAfterDrag(delta, velocity, kind),
|
|
3247
3441
|
emit: (event, payload) => this.emit(event, payload),
|
|
3248
3442
|
listenerCount: (event) => this.bus.listenerCount(event)
|
|
3443
|
+
};
|
|
3444
|
+
}
|
|
3445
|
+
isContentDragAllowed() {
|
|
3446
|
+
if (this.disableDragFlag) return false;
|
|
3447
|
+
const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
|
|
3448
|
+
return point?.dragFromContent ?? this.dragFromContentDefault;
|
|
3449
|
+
}
|
|
3450
|
+
decideContentDrag(surface, e, delta, crossDelta) {
|
|
3451
|
+
if (this.destroyed) return false;
|
|
3452
|
+
if (e.pointerType === "mouse") return false;
|
|
3453
|
+
if (this.gesture?.isDragging) return false;
|
|
3454
|
+
if (!this.isContentDragAllowed()) return false;
|
|
3455
|
+
if (!isDragAllowedFrom(e.target, "sheet")) return false;
|
|
3456
|
+
const decision = decideContentGesture({
|
|
3457
|
+
delta,
|
|
3458
|
+
crossDelta,
|
|
3459
|
+
sharesScrollAxis: this.mode === "bottom" || this.mode === "top",
|
|
3460
|
+
scrollTop: surface.scrollTop,
|
|
3461
|
+
atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
|
|
3462
|
+
});
|
|
3463
|
+
if (decision === "pending") return null;
|
|
3464
|
+
return decision === "drag";
|
|
3465
|
+
}
|
|
3466
|
+
attachDragSurface(surface, kind) {
|
|
3467
|
+
if (this.destroyed || kind !== "content") return;
|
|
3468
|
+
if (this.contentGesture) return;
|
|
3469
|
+
const controller = new GestureController(
|
|
3470
|
+
this.buildGestureDeps(surface, {
|
|
3471
|
+
manageTouchAction: false,
|
|
3472
|
+
deferStart: (e, delta, crossDelta) => this.decideContentDrag(surface, e, delta, crossDelta)
|
|
3473
|
+
})
|
|
3474
|
+
);
|
|
3475
|
+
this.contentGesture = controller;
|
|
3476
|
+
const detachGestures = controller.install();
|
|
3477
|
+
const detachGuard = installTouchScrollGuard(
|
|
3478
|
+
surface,
|
|
3479
|
+
() => controller.isDragging
|
|
3480
|
+
);
|
|
3481
|
+
return () => {
|
|
3482
|
+
detachGuard();
|
|
3483
|
+
detachGestures();
|
|
3484
|
+
if (this.contentGesture === controller) this.contentGesture = void 0;
|
|
3485
|
+
};
|
|
3486
|
+
}
|
|
3487
|
+
sheetDragSurface() {
|
|
3488
|
+
return this.dragFromMode === "handle" ? this.handle : this.element;
|
|
3489
|
+
}
|
|
3490
|
+
canStartSheetDrag(e) {
|
|
3491
|
+
if (this.contentGesture?.isDragging) return false;
|
|
3492
|
+
const target = e.target;
|
|
3493
|
+
const scoped = typeof target?.closest === "function";
|
|
3494
|
+
if (scoped && target.closest(NO_DRAG_SELECTOR)) return false;
|
|
3495
|
+
if (this.handle !== this.element && scoped && this.handle.contains(target)) {
|
|
3496
|
+
return true;
|
|
3497
|
+
}
|
|
3498
|
+
if (!isDragAllowedFrom(e.target, this.dragFromMode)) return false;
|
|
3499
|
+
if (this.dragFromMode === "handle") return true;
|
|
3500
|
+
if (this.scrollContainer && scoped && this.scrollContainer.contains(target) && !target.closest(DRAG_ZONE_SELECTOR)) {
|
|
3501
|
+
return false;
|
|
3502
|
+
}
|
|
3503
|
+
return true;
|
|
3504
|
+
}
|
|
3505
|
+
mountSheetGesture() {
|
|
3506
|
+
const surface = this.sheetDragSurface();
|
|
3507
|
+
const controller = new GestureController(
|
|
3508
|
+
this.buildGestureDeps(surface, {
|
|
3509
|
+
shouldStart: (e) => this.canStartSheetDrag(e),
|
|
3510
|
+
manageTouchAction: this.dragFromMode === "handle"
|
|
3511
|
+
})
|
|
3512
|
+
);
|
|
3513
|
+
this.gesture = controller;
|
|
3514
|
+
const detachGestures = controller.install();
|
|
3515
|
+
const detachGuard = this.dragFromMode === "handle" ? null : installTouchScrollGuard(surface, () => controller.isDragging);
|
|
3516
|
+
this.detachSheetGesture = () => {
|
|
3517
|
+
detachGuard?.();
|
|
3518
|
+
detachGestures();
|
|
3519
|
+
};
|
|
3520
|
+
}
|
|
3521
|
+
attach() {
|
|
3522
|
+
this.mountSheetGesture();
|
|
3523
|
+
this.teardowns.add(() => {
|
|
3524
|
+
this.detachSheetGesture?.();
|
|
3525
|
+
this.detachSheetGesture = null;
|
|
3249
3526
|
});
|
|
3250
|
-
this.teardowns.add(this.gesture.install());
|
|
3251
3527
|
try {
|
|
3252
3528
|
this.attachFeatures();
|
|
3253
3529
|
} catch (err) {
|
|
@@ -3284,7 +3560,7 @@ var BottomSheetCore = class {
|
|
|
3284
3560
|
element: this.element,
|
|
3285
3561
|
getMode: () => this.mode,
|
|
3286
3562
|
isDestroyed: () => this.destroyed,
|
|
3287
|
-
isDragging: () => this.
|
|
3563
|
+
isDragging: () => this.isDraggingAny(),
|
|
3288
3564
|
resolveActiveSnap: () => this.snaps.findById(this.activeId),
|
|
3289
3565
|
getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
|
|
3290
3566
|
getSize: () => this.size,
|
|
@@ -3319,7 +3595,11 @@ var BottomSheetCore = class {
|
|
|
3319
3595
|
);
|
|
3320
3596
|
}
|
|
3321
3597
|
}
|
|
3322
|
-
this.
|
|
3598
|
+
this.mountSliderKeyboard();
|
|
3599
|
+
this.scrim.attach();
|
|
3600
|
+
}
|
|
3601
|
+
mountSliderKeyboard() {
|
|
3602
|
+
const detach = installSliderKeyboard({
|
|
3323
3603
|
handle: this.handle,
|
|
3324
3604
|
mode: this.mode,
|
|
3325
3605
|
isDestroyed: () => this.destroyed,
|
|
@@ -3328,8 +3608,12 @@ var BottomSheetCore = class {
|
|
|
3328
3608
|
snapTo: (id) => {
|
|
3329
3609
|
void this.snapTo(id);
|
|
3330
3610
|
}
|
|
3331
|
-
})
|
|
3332
|
-
this.
|
|
3611
|
+
});
|
|
3612
|
+
this.detachSliderKeyboard = detach;
|
|
3613
|
+
this.teardowns.add(() => {
|
|
3614
|
+
this.detachSliderKeyboard?.();
|
|
3615
|
+
this.detachSliderKeyboard = null;
|
|
3616
|
+
});
|
|
3333
3617
|
}
|
|
3334
3618
|
settleAfterDrag(delta, velocity, kind = "touch") {
|
|
3335
3619
|
const signal = this.newCycle();
|
|
@@ -3382,8 +3666,11 @@ var BottomSheetCore = class {
|
|
|
3382
3666
|
);
|
|
3383
3667
|
});
|
|
3384
3668
|
}
|
|
3669
|
+
isDraggingAny() {
|
|
3670
|
+
return (this.gesture?.isDragging ?? false) || (this.contentGesture?.isDragging ?? false);
|
|
3671
|
+
}
|
|
3385
3672
|
clearWillChangeIfIdle() {
|
|
3386
|
-
if (this.animation.isAnimating || this.
|
|
3673
|
+
if (this.animation.isAnimating || this.isDraggingAny()) return;
|
|
3387
3674
|
this.element.style.willChange = "";
|
|
3388
3675
|
}
|
|
3389
3676
|
haptic() {
|
|
@@ -3396,8 +3683,9 @@ var BottomSheetCore = class {
|
|
|
3396
3683
|
}
|
|
3397
3684
|
applySize(size, skipTransform = false) {
|
|
3398
3685
|
const cap = this.snaps.getMaxAxisSize();
|
|
3399
|
-
const clamped = cap > 0 && size > cap && !this.
|
|
3686
|
+
const clamped = cap > 0 && size > cap && !this.isDraggingAny() && !this.allowOvershoot ? cap : size;
|
|
3400
3687
|
this.size = clamped;
|
|
3688
|
+
if (clamped > 0) this.setRestClosed(false);
|
|
3401
3689
|
const offset = cap - clamped;
|
|
3402
3690
|
const style = this.element.style;
|
|
3403
3691
|
if (!skipTransform) style.transform = this.transformTemplate(offset);
|
|
@@ -3777,50 +4065,10 @@ function installAutoCollapse(deps) {
|
|
|
3777
4065
|
};
|
|
3778
4066
|
}
|
|
3779
4067
|
|
|
3780
|
-
// src/core/features/content-
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
let startY = 0;
|
|
3785
|
-
let startScrollTop = 0;
|
|
3786
|
-
let moved = false;
|
|
3787
|
-
const onTouchStart = (e) => {
|
|
3788
|
-
const t = e.touches[0];
|
|
3789
|
-
if (!t) return;
|
|
3790
|
-
startY = t.clientY;
|
|
3791
|
-
startScrollTop = container.scrollTop;
|
|
3792
|
-
moved = false;
|
|
3793
|
-
};
|
|
3794
|
-
const onTouchMove = (e) => {
|
|
3795
|
-
const t = e.touches[0];
|
|
3796
|
-
if (!t) return;
|
|
3797
|
-
if (Math.abs(t.clientY - startY) > CONTENT_PULL_THRESHOLD) moved = true;
|
|
3798
|
-
};
|
|
3799
|
-
const onTouchEnd = (e) => {
|
|
3800
|
-
if (!moved) return;
|
|
3801
|
-
if (deps.isDragging() || deps.isAnimating()) return;
|
|
3802
|
-
if (container.scrollTop !== startScrollTop) return;
|
|
3803
|
-
const t = e.changedTouches[0];
|
|
3804
|
-
if (!t) return;
|
|
3805
|
-
const deltaY = t.clientY - startY;
|
|
3806
|
-
const atTop = container.scrollTop <= 0;
|
|
3807
|
-
const allowed = deps.getAllowedIds();
|
|
3808
|
-
const idx = allowed.indexOf(deps.getActiveId());
|
|
3809
|
-
if (idx === -1) return;
|
|
3810
|
-
if (atTop && deltaY > CONTENT_PULL_THRESHOLD && idx > 0) {
|
|
3811
|
-
deps.snapTo(allowed[idx - 1]);
|
|
3812
|
-
} else if (deltaY < -CONTENT_PULL_THRESHOLD && idx < allowed.length - 1) {
|
|
3813
|
-
deps.snapTo(allowed[idx + 1]);
|
|
3814
|
-
}
|
|
3815
|
-
};
|
|
3816
|
-
container.addEventListener("touchstart", onTouchStart, { passive: true });
|
|
3817
|
-
container.addEventListener("touchmove", onTouchMove, { passive: true });
|
|
3818
|
-
container.addEventListener("touchend", onTouchEnd, { passive: true });
|
|
3819
|
-
return () => {
|
|
3820
|
-
container.removeEventListener("touchstart", onTouchStart);
|
|
3821
|
-
container.removeEventListener("touchmove", onTouchMove);
|
|
3822
|
-
container.removeEventListener("touchend", onTouchEnd);
|
|
3823
|
-
};
|
|
4068
|
+
// src/core/features/content-drag.ts
|
|
4069
|
+
function installContentDrag(deps) {
|
|
4070
|
+
const detach = deps.attachDragSurface(deps.container, "content");
|
|
4071
|
+
return () => detach?.();
|
|
3824
4072
|
}
|
|
3825
4073
|
|
|
3826
4074
|
// src/core/features/visual-viewport.ts
|
|
@@ -3928,13 +4176,9 @@ function contentSwipeFeature() {
|
|
|
3928
4176
|
stage: "attach",
|
|
3929
4177
|
install: (ctx) => {
|
|
3930
4178
|
if (!ctx.scrollContainer) return;
|
|
3931
|
-
return
|
|
4179
|
+
return installContentDrag({
|
|
3932
4180
|
container: ctx.scrollContainer,
|
|
3933
|
-
|
|
3934
|
-
isAnimating: ctx.isAnimating,
|
|
3935
|
-
getAllowedIds: ctx.allowedIdsBySize,
|
|
3936
|
-
getActiveId: ctx.getActiveId,
|
|
3937
|
-
snapTo: ctx.snapTo
|
|
4181
|
+
attachDragSurface: ctx.attachDragSurface
|
|
3938
4182
|
});
|
|
3939
4183
|
}
|
|
3940
4184
|
};
|
|
@@ -3986,7 +4230,7 @@ var BottomSheetEngine = class extends BottomSheetCore {
|
|
|
3986
4230
|
}
|
|
3987
4231
|
};
|
|
3988
4232
|
|
|
3989
|
-
// src/core/lifecycle/
|
|
4233
|
+
// src/core/lifecycle/sheet-manager.ts
|
|
3990
4234
|
var createSheetManager = (initial = {}) => {
|
|
3991
4235
|
const registry = /* @__PURE__ */ new Map();
|
|
3992
4236
|
for (const [key, config] of Object.entries(initial)) {
|
|
@@ -4012,762 +4256,24 @@ var createSheetManager = (initial = {}) => {
|
|
|
4012
4256
|
};
|
|
4013
4257
|
};
|
|
4014
4258
|
|
|
4015
|
-
// src/core/primitives/overlay-transforms.ts
|
|
4016
|
-
var closedTransform = (edge) => CLOSED_TRANSFORM[edge];
|
|
4017
|
-
var closedTransformFor = (edge, animation, peekPx) => {
|
|
4018
|
-
switch (animation) {
|
|
4019
|
-
case "fade":
|
|
4020
|
-
return "translate3d(0, 0, 0)";
|
|
4021
|
-
case "scale":
|
|
4022
|
-
return "translate3d(0, 0, 0) scale(0.94)";
|
|
4023
|
-
case "slide":
|
|
4024
|
-
default:
|
|
4025
|
-
if (peekPx !== void 0 && edge === "bottom") {
|
|
4026
|
-
return `translate3d(0, calc(100% - ${peekPx}px), 0)`;
|
|
4027
|
-
}
|
|
4028
|
-
return closedTransform(edge);
|
|
4029
|
-
}
|
|
4030
|
-
};
|
|
4031
|
-
var openTransformFor = (animation) => animation === "scale" ? "translate3d(0, 0, 0) scale(1)" : "translate3d(0, 0, 0)";
|
|
4032
|
-
|
|
4033
|
-
// src/core/features/overlay-swipe.ts
|
|
4034
|
-
function installOverlaySwipe(deps) {
|
|
4035
|
-
const el = deps.element;
|
|
4036
|
-
const edge = deps.edge;
|
|
4037
|
-
const isVertical = edge === "bottom" || edge === "top";
|
|
4038
|
-
const sign = edge === "bottom" || edge === "right" ? 1 : -1;
|
|
4039
|
-
const SLOP = 8;
|
|
4040
|
-
let startX = 0;
|
|
4041
|
-
let startY = 0;
|
|
4042
|
-
let startT = 0;
|
|
4043
|
-
let tracking = false;
|
|
4044
|
-
let dragging = false;
|
|
4045
|
-
let pointerId = null;
|
|
4046
|
-
const previousTouchAction = el.style.touchAction;
|
|
4047
|
-
el.style.touchAction = isVertical ? "pan-x" : "pan-y";
|
|
4048
|
-
const onDown = (e) => {
|
|
4049
|
-
if (e.button !== void 0 && e.button !== 0) return;
|
|
4050
|
-
pointerId = e.pointerId;
|
|
4051
|
-
startX = e.clientX;
|
|
4052
|
-
startY = e.clientY;
|
|
4053
|
-
startT = performance.now();
|
|
4054
|
-
tracking = true;
|
|
4055
|
-
dragging = false;
|
|
4056
|
-
};
|
|
4057
|
-
const onMove = (e) => {
|
|
4058
|
-
if (!tracking || e.pointerId !== pointerId) return;
|
|
4059
|
-
const delta = isVertical ? e.clientY - startY : e.clientX - startX;
|
|
4060
|
-
if (!dragging) {
|
|
4061
|
-
if (Math.abs(delta) < SLOP) return;
|
|
4062
|
-
dragging = true;
|
|
4063
|
-
el.style.transition = "none";
|
|
4064
|
-
try {
|
|
4065
|
-
el.setPointerCapture(e.pointerId);
|
|
4066
|
-
} catch {
|
|
4067
|
-
}
|
|
4068
|
-
}
|
|
4069
|
-
const offset = Math.max(0, sign * delta);
|
|
4070
|
-
el.style.transform = isVertical ? `translate3d(0, ${sign * offset}px, 0)` : `translate3d(${sign * offset}px, 0, 0)`;
|
|
4071
|
-
};
|
|
4072
|
-
const finish = (e) => {
|
|
4073
|
-
if (!tracking || e.pointerId !== pointerId) return;
|
|
4074
|
-
tracking = false;
|
|
4075
|
-
pointerId = null;
|
|
4076
|
-
if (!dragging) return;
|
|
4077
|
-
dragging = false;
|
|
4078
|
-
const dt = performance.now() - startT || 1;
|
|
4079
|
-
const delta = isVertical ? e.clientY - startY : e.clientX - startX;
|
|
4080
|
-
const offset = Math.max(0, sign * delta);
|
|
4081
|
-
const velocity = sign * delta / dt;
|
|
4082
|
-
const size = isVertical ? el.offsetHeight : el.offsetWidth;
|
|
4083
|
-
const past = offset > size * deps.getThreshold() || velocity > deps.getVelocityThreshold();
|
|
4084
|
-
el.style.transition = deps.getExitTransition();
|
|
4085
|
-
if (past) {
|
|
4086
|
-
deps.close();
|
|
4087
|
-
} else {
|
|
4088
|
-
el.style.transform = deps.getOpenTransform();
|
|
4089
|
-
}
|
|
4090
|
-
};
|
|
4091
|
-
el.addEventListener("pointerdown", onDown);
|
|
4092
|
-
el.addEventListener("pointermove", onMove);
|
|
4093
|
-
el.addEventListener("pointerup", finish);
|
|
4094
|
-
el.addEventListener("pointercancel", finish);
|
|
4095
|
-
return () => {
|
|
4096
|
-
el.style.touchAction = previousTouchAction;
|
|
4097
|
-
el.removeEventListener("pointerdown", onDown);
|
|
4098
|
-
el.removeEventListener("pointermove", onMove);
|
|
4099
|
-
el.removeEventListener("pointerup", finish);
|
|
4100
|
-
el.removeEventListener("pointercancel", finish);
|
|
4101
|
-
};
|
|
4102
|
-
}
|
|
4103
|
-
|
|
4104
|
-
// src/core/overlay-options.ts
|
|
4105
|
-
var OVERLAY_PRESETS = Object.freeze({
|
|
4106
|
-
sheet: Object.freeze({
|
|
4107
|
-
enterAnimation: "slide",
|
|
4108
|
-
exitAnimation: "slide",
|
|
4109
|
-
backdropOpacity: 0.5,
|
|
4110
|
-
backdropFilter: void 0,
|
|
4111
|
-
swipeToClose: true
|
|
4112
|
-
}),
|
|
4113
|
-
dialog: Object.freeze({
|
|
4114
|
-
enterAnimation: "scale",
|
|
4115
|
-
exitAnimation: "scale",
|
|
4116
|
-
backdropOpacity: 0.6,
|
|
4117
|
-
backdropFilter: "blur(8px)",
|
|
4118
|
-
swipeToClose: false
|
|
4119
|
-
}),
|
|
4120
|
-
sidebar: Object.freeze({
|
|
4121
|
-
enterAnimation: "slide",
|
|
4122
|
-
exitAnimation: "slide",
|
|
4123
|
-
backdropOpacity: 0.4,
|
|
4124
|
-
backdropFilter: void 0,
|
|
4125
|
-
swipeToClose: true
|
|
4126
|
-
}),
|
|
4127
|
-
toast: Object.freeze({
|
|
4128
|
-
enterAnimation: "fade",
|
|
4129
|
-
exitAnimation: "fade",
|
|
4130
|
-
backdropOpacity: 0,
|
|
4131
|
-
backdropFilter: void 0,
|
|
4132
|
-
swipeToClose: false
|
|
4133
|
-
})
|
|
4134
|
-
});
|
|
4135
|
-
|
|
4136
|
-
// src/core/overlay.ts
|
|
4137
|
-
var OverlayEngine = class {
|
|
4138
|
-
constructor(opts) {
|
|
4139
|
-
__publicField(this, "id", nextInstanceId("ovl"));
|
|
4140
|
-
__publicField(this, "element");
|
|
4141
|
-
__publicField(this, "backdrop");
|
|
4142
|
-
__publicField(this, "edge");
|
|
4143
|
-
__publicField(this, "closeOnEscape");
|
|
4144
|
-
__publicField(this, "closeOnBackdropEnabled");
|
|
4145
|
-
__publicField(this, "focusTrapEnabled");
|
|
4146
|
-
__publicField(this, "initialFocus");
|
|
4147
|
-
__publicField(this, "bodyScrollLockEnabled");
|
|
4148
|
-
__publicField(this, "inertSiblingsEnabled");
|
|
4149
|
-
__publicField(this, "closeOnBackEnabled");
|
|
4150
|
-
__publicField(this, "duration");
|
|
4151
|
-
__publicField(this, "enterEasing");
|
|
4152
|
-
__publicField(this, "exitEasing");
|
|
4153
|
-
__publicField(this, "backdropOpacity");
|
|
4154
|
-
__publicField(this, "backdropFilter");
|
|
4155
|
-
__publicField(this, "swipeToCloseEnabled");
|
|
4156
|
-
__publicField(this, "swipeThreshold");
|
|
4157
|
-
__publicField(this, "swipeVelocityThreshold");
|
|
4158
|
-
__publicField(this, "enterAnimation");
|
|
4159
|
-
__publicField(this, "exitAnimation");
|
|
4160
|
-
__publicField(this, "mountTarget");
|
|
4161
|
-
__publicField(this, "originalParent", null);
|
|
4162
|
-
__publicField(this, "originalNextSibling", null);
|
|
4163
|
-
__publicField(this, "mounted", false);
|
|
4164
|
-
__publicField(this, "peekRaw");
|
|
4165
|
-
__publicField(this, "peekPx");
|
|
4166
|
-
__publicField(this, "closeOnOutsidePointerEnabled");
|
|
4167
|
-
__publicField(this, "detachOutsidePointer", null);
|
|
4168
|
-
__publicField(this, "detachSwipe", null);
|
|
4169
|
-
__publicField(this, "respectReducedMotionEnabled");
|
|
4170
|
-
__publicField(this, "isTop", true);
|
|
4171
|
-
__publicField(this, "backMarker", null);
|
|
4172
|
-
__publicField(this, "movedToTarget", false);
|
|
4173
|
-
__publicField(this, "onOpenCb");
|
|
4174
|
-
__publicField(this, "onCloseCb");
|
|
4175
|
-
__publicField(this, "isOpen_", false);
|
|
4176
|
-
__publicField(this, "isAnimating_", false);
|
|
4177
|
-
__publicField(this, "destroyed", false);
|
|
4178
|
-
__publicField(this, "hasInjectedChildren", false);
|
|
4179
|
-
__publicField(this, "cycleNonce", 0);
|
|
4180
|
-
__publicField(this, "bus", createEventBus());
|
|
4181
|
-
__publicField(this, "detachEscape", null);
|
|
4182
|
-
__publicField(this, "detachBackdrop", null);
|
|
4183
|
-
__publicField(this, "releaseStackEntry", null);
|
|
4184
|
-
__publicField(this, "lifecycle");
|
|
4185
|
-
this.element = opts.element;
|
|
4186
|
-
this.backdrop = opts.backdrop;
|
|
4187
|
-
this.edge = opts.edge ?? "bottom";
|
|
4188
|
-
this.closeOnEscape = opts.closeOnEscape ?? true;
|
|
4189
|
-
this.closeOnBackdropEnabled = opts.closeOnBackdrop ?? true;
|
|
4190
|
-
this.focusTrapEnabled = opts.focusTrap ?? true;
|
|
4191
|
-
this.initialFocus = opts.initialFocus;
|
|
4192
|
-
this.bodyScrollLockEnabled = opts.lockBodyScroll ?? true;
|
|
4193
|
-
this.inertSiblingsEnabled = opts.inertSiblings ?? false;
|
|
4194
|
-
this.closeOnBackEnabled = opts.closeOnBack ?? false;
|
|
4195
|
-
this.duration = opts.duration ?? 320;
|
|
4196
|
-
this.enterEasing = opts.enterEasing ?? "cubic-bezier(0.29, 1.24, 0.84, 0.99)";
|
|
4197
|
-
this.exitEasing = opts.exitEasing ?? "cubic-bezier(0.4, 0, 1, 1)";
|
|
4198
|
-
const preset = opts.preset ? OVERLAY_PRESETS[opts.preset] : void 0;
|
|
4199
|
-
this.backdropOpacity = opts.backdropOpacity ?? preset?.backdropOpacity ?? 1;
|
|
4200
|
-
this.backdropFilter = opts.backdropFilter ?? preset?.backdropFilter ?? void 0;
|
|
4201
|
-
const swipeRaw = opts.swipeToClose !== void 0 ? opts.swipeToClose : preset?.swipeToClose;
|
|
4202
|
-
this.assignSwipeFromConfig(swipeRaw);
|
|
4203
|
-
this.enterAnimation = opts.enterAnimation ?? preset?.enterAnimation ?? "slide";
|
|
4204
|
-
this.exitAnimation = opts.exitAnimation ?? preset?.exitAnimation ?? this.enterAnimation;
|
|
4205
|
-
this.mountTarget = opts.mountTo;
|
|
4206
|
-
this.peekRaw = opts.peek;
|
|
4207
|
-
this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer ?? false;
|
|
4208
|
-
this.respectReducedMotionEnabled = opts.respectReducedMotion ?? true;
|
|
4209
|
-
this.onOpenCb = opts.onOpen;
|
|
4210
|
-
this.onCloseCb = opts.onClose;
|
|
4211
|
-
if (this.peekRaw !== void 0 && this.edge !== "bottom") {
|
|
4212
|
-
devWarn(
|
|
4213
|
-
"[OverlayEngine] `peek` is only supported on edge: 'bottom' \u2014 ignoring."
|
|
4214
|
-
);
|
|
4215
|
-
this.peekRaw = void 0;
|
|
4216
|
-
}
|
|
4217
|
-
if (this.peekRaw !== void 0) {
|
|
4218
|
-
this.peekPx = this.resolvePeekPx(this.peekRaw);
|
|
4219
|
-
}
|
|
4220
|
-
this.lifecycle = new LifecycleController(
|
|
4221
|
-
{
|
|
4222
|
-
element: this.element,
|
|
4223
|
-
close: () => this.close("escape")
|
|
4224
|
-
},
|
|
4225
|
-
{
|
|
4226
|
-
focusTrap: this.focusTrapEnabled,
|
|
4227
|
-
initialFocus: this.initialFocus,
|
|
4228
|
-
closeOnEscape: this.closeOnEscape,
|
|
4229
|
-
lockBodyScroll: this.bodyScrollLockEnabled,
|
|
4230
|
-
inertSiblings: this.inertSiblingsEnabled,
|
|
4231
|
-
shouldApplyInertSiblings: () => {
|
|
4232
|
-
const bodyChildren = Array.from(document.body.children);
|
|
4233
|
-
return bodyChildren.some(
|
|
4234
|
-
(c) => c === this.element || c.contains(this.element)
|
|
4235
|
-
);
|
|
4236
|
-
},
|
|
4237
|
-
returnFocus: opts.returnFocus
|
|
4238
|
-
}
|
|
4239
|
-
);
|
|
4240
|
-
this.applyClosedStyles();
|
|
4241
|
-
this.registerInStack();
|
|
4242
|
-
if (opts.initialOpen) void this.open();
|
|
4243
|
-
}
|
|
4244
|
-
get state() {
|
|
4245
|
-
return { isOpen: this.isOpen_, isAnimating: this.isAnimating_ };
|
|
4246
|
-
}
|
|
4247
|
-
on(event, fn) {
|
|
4248
|
-
return this.bus.on(event, fn);
|
|
4249
|
-
}
|
|
4250
|
-
open() {
|
|
4251
|
-
if (this.destroyed || this.isOpen_) return Promise.resolve();
|
|
4252
|
-
this.maybeMount();
|
|
4253
|
-
this.emit("before-open", void 0);
|
|
4254
|
-
this.isOpen_ = true;
|
|
4255
|
-
this.isAnimating_ = true;
|
|
4256
|
-
sheetStack.promote(this.id);
|
|
4257
|
-
this.element.removeAttribute("hidden");
|
|
4258
|
-
this.element.setAttribute("data-state", "entering");
|
|
4259
|
-
if (this.focusTrapEnabled) {
|
|
4260
|
-
this.element.setAttribute("aria-modal", "true");
|
|
4261
|
-
}
|
|
4262
|
-
const dur = this.effectiveDuration();
|
|
4263
|
-
const transitionStr = `transform ${dur}ms ${this.enterEasing}, opacity ${dur}ms ease-out`;
|
|
4264
|
-
this.element.style.transition = transitionStr;
|
|
4265
|
-
if (this.backdrop) {
|
|
4266
|
-
this.backdrop.style.transition = `opacity ${dur}ms ease-out`;
|
|
4267
|
-
}
|
|
4268
|
-
this.setWillChange(true);
|
|
4269
|
-
const cycle = ++this.cycleNonce;
|
|
4270
|
-
return new Promise((resolve) => {
|
|
4271
|
-
requestAnimationFrame(() => {
|
|
4272
|
-
if (this.destroyed || cycle !== this.cycleNonce) return resolve();
|
|
4273
|
-
requestAnimationFrame(() => {
|
|
4274
|
-
if (this.destroyed || cycle !== this.cycleNonce) return resolve();
|
|
4275
|
-
this.element.style.transform = openTransformFor(this.enterAnimation);
|
|
4276
|
-
this.element.style.opacity = "1";
|
|
4277
|
-
if (this.backdrop) {
|
|
4278
|
-
this.backdrop.style.opacity = String(this.backdropOpacity);
|
|
4279
|
-
this.syncBackdropPointerEvents();
|
|
4280
|
-
if (this.backdropFilter) {
|
|
4281
|
-
this.applyBackdropFilter(this.backdropFilter);
|
|
4282
|
-
}
|
|
4283
|
-
}
|
|
4284
|
-
try {
|
|
4285
|
-
this.installInteractiveListeners();
|
|
4286
|
-
} catch (err) {
|
|
4287
|
-
this.releaseInteractiveListeners();
|
|
4288
|
-
this.isOpen_ = false;
|
|
4289
|
-
this.isAnimating_ = false;
|
|
4290
|
-
this.setWillChange(false);
|
|
4291
|
-
this.element.style.transform = closedTransformFor(
|
|
4292
|
-
this.edge,
|
|
4293
|
-
this.enterAnimation,
|
|
4294
|
-
this.peekPx
|
|
4295
|
-
);
|
|
4296
|
-
this.element.style.opacity = "0";
|
|
4297
|
-
if (this.backdrop) {
|
|
4298
|
-
this.backdrop.style.opacity = "0";
|
|
4299
|
-
this.backdrop.style.pointerEvents = "none";
|
|
4300
|
-
if (this.backdropFilter) {
|
|
4301
|
-
this.applyBackdropFilter(void 0);
|
|
4302
|
-
}
|
|
4303
|
-
}
|
|
4304
|
-
this.element.setAttribute("data-state", "closed");
|
|
4305
|
-
this.element.setAttribute("hidden", "");
|
|
4306
|
-
if (this.focusTrapEnabled) {
|
|
4307
|
-
this.element.removeAttribute("aria-modal");
|
|
4308
|
-
}
|
|
4309
|
-
queueMicrotask(() => {
|
|
4310
|
-
throw err;
|
|
4311
|
-
});
|
|
4312
|
-
return resolve();
|
|
4313
|
-
}
|
|
4314
|
-
this.awaitTransition(
|
|
4315
|
-
cycle,
|
|
4316
|
-
this.enterAnimation === "fade" ? "opacity" : "transform"
|
|
4317
|
-
).then(() => {
|
|
4318
|
-
if (this.destroyed || cycle !== this.cycleNonce) return resolve();
|
|
4319
|
-
this.isAnimating_ = false;
|
|
4320
|
-
this.setWillChange(false);
|
|
4321
|
-
this.element.setAttribute("data-state", "open");
|
|
4322
|
-
this.emit("open", void 0);
|
|
4323
|
-
this.onOpenCb?.();
|
|
4324
|
-
resolve();
|
|
4325
|
-
});
|
|
4326
|
-
});
|
|
4327
|
-
});
|
|
4328
|
-
});
|
|
4329
|
-
}
|
|
4330
|
-
close(reason = "programmatic") {
|
|
4331
|
-
if (this.destroyed || !this.isOpen_) return Promise.resolve();
|
|
4332
|
-
this.emit("before-close", void 0);
|
|
4333
|
-
this.isOpen_ = false;
|
|
4334
|
-
this.isAnimating_ = true;
|
|
4335
|
-
sheetStack.update();
|
|
4336
|
-
if (reason !== "back" && this.backMarker) {
|
|
4337
|
-
popBackMarker(this.backMarker);
|
|
4338
|
-
}
|
|
4339
|
-
this.backMarker = null;
|
|
4340
|
-
this.element.setAttribute("data-state", "exiting");
|
|
4341
|
-
const dur = this.effectiveDuration();
|
|
4342
|
-
const transitionStr = `transform ${dur}ms ${this.exitEasing}, opacity ${dur}ms ease-in`;
|
|
4343
|
-
this.element.style.transition = transitionStr;
|
|
4344
|
-
if (this.backdrop) {
|
|
4345
|
-
this.backdrop.style.transition = `opacity ${dur}ms ease-in`;
|
|
4346
|
-
}
|
|
4347
|
-
this.setWillChange(true);
|
|
4348
|
-
const cycle = ++this.cycleNonce;
|
|
4349
|
-
return new Promise((resolve) => {
|
|
4350
|
-
requestAnimationFrame(() => {
|
|
4351
|
-
if (this.destroyed || cycle !== this.cycleNonce) return resolve();
|
|
4352
|
-
this.element.style.transform = closedTransformFor(
|
|
4353
|
-
this.edge,
|
|
4354
|
-
this.exitAnimation,
|
|
4355
|
-
this.peekPx
|
|
4356
|
-
);
|
|
4357
|
-
this.element.style.opacity = this.peekPx !== void 0 ? "1" : "0";
|
|
4358
|
-
if (this.backdrop) {
|
|
4359
|
-
this.backdrop.style.opacity = "0";
|
|
4360
|
-
this.backdrop.style.pointerEvents = "none";
|
|
4361
|
-
if (this.backdropFilter) {
|
|
4362
|
-
this.applyBackdropFilter(void 0);
|
|
4363
|
-
}
|
|
4364
|
-
}
|
|
4365
|
-
this.releaseInteractiveListeners();
|
|
4366
|
-
this.awaitTransition(
|
|
4367
|
-
cycle,
|
|
4368
|
-
this.exitAnimation === "fade" ? "opacity" : "transform"
|
|
4369
|
-
).then(() => {
|
|
4370
|
-
if (this.destroyed || cycle !== this.cycleNonce) return resolve();
|
|
4371
|
-
this.isAnimating_ = false;
|
|
4372
|
-
this.setWillChange(false);
|
|
4373
|
-
if (this.peekPx === void 0) {
|
|
4374
|
-
this.element.setAttribute("hidden", "");
|
|
4375
|
-
}
|
|
4376
|
-
this.element.setAttribute("data-state", "closed");
|
|
4377
|
-
if (this.focusTrapEnabled) {
|
|
4378
|
-
this.element.removeAttribute("aria-modal");
|
|
4379
|
-
}
|
|
4380
|
-
this.emit("close", { reason });
|
|
4381
|
-
this.onCloseCb?.();
|
|
4382
|
-
resolve();
|
|
4383
|
-
});
|
|
4384
|
-
});
|
|
4385
|
-
});
|
|
4386
|
-
}
|
|
4387
|
-
toggle() {
|
|
4388
|
-
if (this.destroyed) return Promise.resolve();
|
|
4389
|
-
return this.isOpen_ ? this.close() : this.open();
|
|
4390
|
-
}
|
|
4391
|
-
destroy() {
|
|
4392
|
-
this.destroyed = true;
|
|
4393
|
-
this.cycleNonce++;
|
|
4394
|
-
this.bus.clear();
|
|
4395
|
-
this.setWillChange(false);
|
|
4396
|
-
this.releaseInteractiveListeners();
|
|
4397
|
-
if (this.backMarker) {
|
|
4398
|
-
popBackMarker(this.backMarker);
|
|
4399
|
-
this.backMarker = null;
|
|
4400
|
-
}
|
|
4401
|
-
this.releaseStackEntry?.();
|
|
4402
|
-
this.releaseStackEntry = null;
|
|
4403
|
-
const hadOriginalParent = this.originalParent !== null;
|
|
4404
|
-
this.restoreMount();
|
|
4405
|
-
if (this.movedToTarget && !hadOriginalParent && this.element.parentNode) {
|
|
4406
|
-
this.element.parentNode.removeChild(this.element);
|
|
4407
|
-
}
|
|
4408
|
-
}
|
|
4409
|
-
setBackdropOpacity(opacity) {
|
|
4410
|
-
if (this.destroyed) return;
|
|
4411
|
-
this.backdropOpacity = opacity;
|
|
4412
|
-
if (this.isOpen_ && this.backdrop) {
|
|
4413
|
-
this.backdrop.style.opacity = String(opacity);
|
|
4414
|
-
this.syncBackdropPointerEvents();
|
|
4415
|
-
}
|
|
4416
|
-
}
|
|
4417
|
-
setBackdropFilter(filter) {
|
|
4418
|
-
if (this.destroyed) return;
|
|
4419
|
-
this.backdropFilter = filter;
|
|
4420
|
-
if (!this.isOpen_ || !this.backdrop) return;
|
|
4421
|
-
this.applyBackdropFilter(filter);
|
|
4422
|
-
}
|
|
4423
|
-
setSwipeToClose(config) {
|
|
4424
|
-
if (this.destroyed) return;
|
|
4425
|
-
const wasEnabled = this.swipeToCloseEnabled;
|
|
4426
|
-
this.assignSwipeFromConfig(config);
|
|
4427
|
-
if (!this.isOpen_) return;
|
|
4428
|
-
if (this.swipeToCloseEnabled && !this.detachSwipe) {
|
|
4429
|
-
this.detachSwipe = this.installSwipeToClose();
|
|
4430
|
-
} else if (!this.swipeToCloseEnabled && wasEnabled && this.detachSwipe) {
|
|
4431
|
-
this.detachSwipe();
|
|
4432
|
-
this.detachSwipe = null;
|
|
4433
|
-
}
|
|
4434
|
-
}
|
|
4435
|
-
setEnterAnimation(animation) {
|
|
4436
|
-
if (this.destroyed) return;
|
|
4437
|
-
this.enterAnimation = animation;
|
|
4438
|
-
}
|
|
4439
|
-
setExitAnimation(animation) {
|
|
4440
|
-
if (this.destroyed) return;
|
|
4441
|
-
this.exitAnimation = animation;
|
|
4442
|
-
}
|
|
4443
|
-
setReturnFocus(target) {
|
|
4444
|
-
if (this.destroyed) return;
|
|
4445
|
-
this.lifecycle.setReturnFocus(target);
|
|
4446
|
-
}
|
|
4447
|
-
setOverlay(opts) {
|
|
4448
|
-
if (this.destroyed) return;
|
|
4449
|
-
const preset = opts.preset ? OVERLAY_PRESETS[opts.preset] : void 0;
|
|
4450
|
-
const merged = preset ? {
|
|
4451
|
-
backdropOpacity: preset.backdropOpacity,
|
|
4452
|
-
backdropFilter: preset.backdropFilter === void 0 ? null : preset.backdropFilter,
|
|
4453
|
-
swipeToClose: preset.swipeToClose,
|
|
4454
|
-
enterAnimation: preset.enterAnimation,
|
|
4455
|
-
exitAnimation: preset.exitAnimation
|
|
4456
|
-
} : {};
|
|
4457
|
-
if (opts.backdropOpacity !== void 0) {
|
|
4458
|
-
merged.backdropOpacity = opts.backdropOpacity;
|
|
4459
|
-
}
|
|
4460
|
-
if (opts.backdropFilter !== void 0) {
|
|
4461
|
-
merged.backdropFilter = opts.backdropFilter;
|
|
4462
|
-
}
|
|
4463
|
-
if (opts.swipeToClose !== void 0) {
|
|
4464
|
-
merged.swipeToClose = opts.swipeToClose;
|
|
4465
|
-
}
|
|
4466
|
-
if (opts.enterAnimation !== void 0) {
|
|
4467
|
-
merged.enterAnimation = opts.enterAnimation;
|
|
4468
|
-
}
|
|
4469
|
-
if (opts.exitAnimation !== void 0) {
|
|
4470
|
-
merged.exitAnimation = opts.exitAnimation;
|
|
4471
|
-
}
|
|
4472
|
-
if (merged.enterAnimation !== void 0) {
|
|
4473
|
-
this.enterAnimation = merged.enterAnimation;
|
|
4474
|
-
}
|
|
4475
|
-
if (merged.exitAnimation !== void 0) {
|
|
4476
|
-
this.exitAnimation = merged.exitAnimation;
|
|
4477
|
-
}
|
|
4478
|
-
if (merged.swipeToClose !== void 0) {
|
|
4479
|
-
this.setSwipeToClose(merged.swipeToClose);
|
|
4480
|
-
}
|
|
4481
|
-
if (merged.backdropOpacity !== void 0) {
|
|
4482
|
-
this.backdropOpacity = merged.backdropOpacity;
|
|
4483
|
-
}
|
|
4484
|
-
if (merged.backdropFilter !== void 0) {
|
|
4485
|
-
this.backdropFilter = merged.backdropFilter === null ? void 0 : merged.backdropFilter;
|
|
4486
|
-
}
|
|
4487
|
-
if (this.isOpen_ && this.backdrop) {
|
|
4488
|
-
if (merged.backdropOpacity !== void 0) {
|
|
4489
|
-
this.backdrop.style.opacity = String(this.backdropOpacity);
|
|
4490
|
-
this.syncBackdropPointerEvents();
|
|
4491
|
-
}
|
|
4492
|
-
if (merged.backdropFilter !== void 0) {
|
|
4493
|
-
this.applyBackdropFilter(this.backdropFilter);
|
|
4494
|
-
}
|
|
4495
|
-
}
|
|
4496
|
-
if (opts.duration !== void 0) this.duration = opts.duration;
|
|
4497
|
-
if (opts.enterEasing !== void 0) this.enterEasing = opts.enterEasing;
|
|
4498
|
-
if (opts.exitEasing !== void 0) this.exitEasing = opts.exitEasing;
|
|
4499
|
-
if (opts.closeOnEscape !== void 0) {
|
|
4500
|
-
this.closeOnEscape = opts.closeOnEscape;
|
|
4501
|
-
if (!opts.closeOnEscape) {
|
|
4502
|
-
this.detachEscape?.();
|
|
4503
|
-
this.detachEscape = null;
|
|
4504
|
-
} else if (this.isOpen_) {
|
|
4505
|
-
this.installInteractiveListeners();
|
|
4506
|
-
}
|
|
4507
|
-
}
|
|
4508
|
-
if (opts.closeOnBackdrop !== void 0) {
|
|
4509
|
-
this.closeOnBackdropEnabled = opts.closeOnBackdrop;
|
|
4510
|
-
if (!opts.closeOnBackdrop) {
|
|
4511
|
-
this.detachBackdrop?.();
|
|
4512
|
-
this.detachBackdrop = null;
|
|
4513
|
-
} else if (this.isOpen_) {
|
|
4514
|
-
this.installInteractiveListeners();
|
|
4515
|
-
}
|
|
4516
|
-
}
|
|
4517
|
-
if (opts.closeOnOutsidePointer !== void 0) {
|
|
4518
|
-
this.closeOnOutsidePointerEnabled = opts.closeOnOutsidePointer;
|
|
4519
|
-
if (!opts.closeOnOutsidePointer) {
|
|
4520
|
-
this.detachOutsidePointer?.();
|
|
4521
|
-
this.detachOutsidePointer = null;
|
|
4522
|
-
} else if (this.isOpen_) {
|
|
4523
|
-
this.installInteractiveListeners();
|
|
4524
|
-
}
|
|
4525
|
-
}
|
|
4526
|
-
if (opts.children !== void 0) {
|
|
4527
|
-
if (opts.children === null) {
|
|
4528
|
-
this.clearOverlayChildren();
|
|
4529
|
-
} else {
|
|
4530
|
-
this.setOverlayChildren(opts.children);
|
|
4531
|
-
}
|
|
4532
|
-
}
|
|
4533
|
-
}
|
|
4534
|
-
setOverlayChildren(children) {
|
|
4535
|
-
if (this.destroyed) return;
|
|
4536
|
-
const node = typeof children === "function" ? children() : children;
|
|
4537
|
-
this.element.replaceChildren(node);
|
|
4538
|
-
this.hasInjectedChildren = true;
|
|
4539
|
-
}
|
|
4540
|
-
clearOverlayChildren() {
|
|
4541
|
-
if (this.destroyed || !this.hasInjectedChildren) return;
|
|
4542
|
-
this.element.replaceChildren();
|
|
4543
|
-
this.hasInjectedChildren = false;
|
|
4544
|
-
}
|
|
4545
|
-
assignSwipeFromConfig(swipe) {
|
|
4546
|
-
if (typeof swipe === "object" && swipe !== null) {
|
|
4547
|
-
this.swipeToCloseEnabled = swipe.enabled ?? true;
|
|
4548
|
-
this.swipeThreshold = swipe.threshold ?? 0.3;
|
|
4549
|
-
this.swipeVelocityThreshold = swipe.velocityThreshold ?? 0.5;
|
|
4550
|
-
} else {
|
|
4551
|
-
this.swipeToCloseEnabled = swipe ?? false;
|
|
4552
|
-
this.swipeThreshold = 0.3;
|
|
4553
|
-
this.swipeVelocityThreshold = 0.5;
|
|
4554
|
-
}
|
|
4555
|
-
}
|
|
4556
|
-
emit(event, payload) {
|
|
4557
|
-
this.bus.emit(event, payload);
|
|
4558
|
-
}
|
|
4559
|
-
effectiveDuration() {
|
|
4560
|
-
return this.respectReducedMotionEnabled && prefersReducedMotion() ? 0 : this.duration;
|
|
4561
|
-
}
|
|
4562
|
-
resolvePeekPx(raw) {
|
|
4563
|
-
if (typeof raw === "number") return Math.max(0, raw);
|
|
4564
|
-
try {
|
|
4565
|
-
return Math.max(0, resolveSnap(raw, "bottom"));
|
|
4566
|
-
} catch {
|
|
4567
|
-
return 0;
|
|
4568
|
-
}
|
|
4569
|
-
}
|
|
4570
|
-
maybeMount() {
|
|
4571
|
-
if (this.mounted || !this.mountTarget || this.mountTarget === "parent") {
|
|
4572
|
-
this.mounted = true;
|
|
4573
|
-
return;
|
|
4574
|
-
}
|
|
4575
|
-
const target = this.mountTarget === "body" ? document.body : this.mountTarget;
|
|
4576
|
-
if (!target) {
|
|
4577
|
-
this.mounted = true;
|
|
4578
|
-
return;
|
|
4579
|
-
}
|
|
4580
|
-
this.originalParent = this.element.parentNode;
|
|
4581
|
-
this.originalNextSibling = this.element.nextSibling;
|
|
4582
|
-
target.appendChild(this.element);
|
|
4583
|
-
this.movedToTarget = true;
|
|
4584
|
-
this.mounted = true;
|
|
4585
|
-
}
|
|
4586
|
-
restoreMount() {
|
|
4587
|
-
if (!this.originalParent) return;
|
|
4588
|
-
try {
|
|
4589
|
-
if (this.originalNextSibling && this.originalNextSibling.parentNode === this.originalParent) {
|
|
4590
|
-
this.originalParent.insertBefore(this.element, this.originalNextSibling);
|
|
4591
|
-
} else {
|
|
4592
|
-
this.originalParent.appendChild(this.element);
|
|
4593
|
-
}
|
|
4594
|
-
} catch {
|
|
4595
|
-
}
|
|
4596
|
-
this.originalParent = null;
|
|
4597
|
-
this.originalNextSibling = null;
|
|
4598
|
-
}
|
|
4599
|
-
applyClosedStyles() {
|
|
4600
|
-
this.element.style.transform = closedTransformFor(
|
|
4601
|
-
this.edge,
|
|
4602
|
-
this.enterAnimation,
|
|
4603
|
-
this.peekPx
|
|
4604
|
-
);
|
|
4605
|
-
this.element.style.opacity = this.peekPx !== void 0 ? "1" : "0";
|
|
4606
|
-
if (this.peekPx === void 0) {
|
|
4607
|
-
this.element.setAttribute("hidden", "");
|
|
4608
|
-
}
|
|
4609
|
-
this.element.setAttribute("data-state", "closed");
|
|
4610
|
-
if (this.backdrop) {
|
|
4611
|
-
this.backdrop.style.opacity = "0";
|
|
4612
|
-
this.backdrop.style.pointerEvents = "none";
|
|
4613
|
-
}
|
|
4614
|
-
}
|
|
4615
|
-
syncBackdropPointerEvents() {
|
|
4616
|
-
if (!this.backdrop) return;
|
|
4617
|
-
this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
|
|
4618
|
-
}
|
|
4619
|
-
applyBackdropFilter(filter) {
|
|
4620
|
-
if (!this.backdrop) return;
|
|
4621
|
-
const style = this.backdrop.style;
|
|
4622
|
-
if (filter) {
|
|
4623
|
-
this.backdrop.style.backdropFilter = filter;
|
|
4624
|
-
style.webkitBackdropFilter = filter;
|
|
4625
|
-
} else {
|
|
4626
|
-
this.backdrop.style.backdropFilter = "";
|
|
4627
|
-
style.webkitBackdropFilter = "";
|
|
4628
|
-
}
|
|
4629
|
-
}
|
|
4630
|
-
setWillChange(on) {
|
|
4631
|
-
this.element.style.willChange = on ? "transform, opacity" : "";
|
|
4632
|
-
if (this.backdrop) {
|
|
4633
|
-
this.backdrop.style.willChange = on ? "opacity" : "";
|
|
4634
|
-
}
|
|
4635
|
-
}
|
|
4636
|
-
awaitTransition(cycle, property = "transform") {
|
|
4637
|
-
return new Promise((resolve) => {
|
|
4638
|
-
let done = false;
|
|
4639
|
-
const finish = () => {
|
|
4640
|
-
if (done) return;
|
|
4641
|
-
done = true;
|
|
4642
|
-
this.element.removeEventListener("transitionend", onEnd);
|
|
4643
|
-
clearTimeout(timer);
|
|
4644
|
-
resolve();
|
|
4645
|
-
};
|
|
4646
|
-
const onEnd = (e) => {
|
|
4647
|
-
if (cycle !== this.cycleNonce) {
|
|
4648
|
-
finish();
|
|
4649
|
-
return;
|
|
4650
|
-
}
|
|
4651
|
-
if (e.target === this.element && e.propertyName === property) finish();
|
|
4652
|
-
};
|
|
4653
|
-
this.element.addEventListener("transitionend", onEnd);
|
|
4654
|
-
const timer = window.setTimeout(finish, this.effectiveDuration() + 50);
|
|
4655
|
-
});
|
|
4656
|
-
}
|
|
4657
|
-
installInteractiveListeners() {
|
|
4658
|
-
this.lifecycle.install();
|
|
4659
|
-
if (this.swipeToCloseEnabled && !this.detachSwipe) {
|
|
4660
|
-
this.detachSwipe = this.installSwipeToClose();
|
|
4661
|
-
}
|
|
4662
|
-
if (this.closeOnEscape && !this.detachEscape) {
|
|
4663
|
-
const handler = (e) => {
|
|
4664
|
-
if (e.defaultPrevented) return;
|
|
4665
|
-
if (e.key === "Escape" && this.isOpen_ && this.isTop) {
|
|
4666
|
-
void this.close("escape");
|
|
4667
|
-
}
|
|
4668
|
-
};
|
|
4669
|
-
document.addEventListener("keydown", handler);
|
|
4670
|
-
this.detachEscape = () => document.removeEventListener("keydown", handler);
|
|
4671
|
-
}
|
|
4672
|
-
if (this.closeOnBackdropEnabled && this.backdrop && !this.detachBackdrop) {
|
|
4673
|
-
const handler = () => void this.close("backdrop");
|
|
4674
|
-
this.backdrop.addEventListener("click", handler);
|
|
4675
|
-
this.detachBackdrop = () => this.backdrop?.removeEventListener("click", handler);
|
|
4676
|
-
}
|
|
4677
|
-
if (this.closeOnOutsidePointerEnabled && !this.detachOutsidePointer) {
|
|
4678
|
-
const handler = (e) => {
|
|
4679
|
-
if (!this.isOpen_) return;
|
|
4680
|
-
const target = e.target;
|
|
4681
|
-
if (!target) return;
|
|
4682
|
-
if (this.element.contains(target)) return;
|
|
4683
|
-
if (this.backdrop && this.backdrop.contains(target)) return;
|
|
4684
|
-
void this.close("outside-pointer");
|
|
4685
|
-
};
|
|
4686
|
-
document.addEventListener("pointerdown", handler, true);
|
|
4687
|
-
this.detachOutsidePointer = () => document.removeEventListener("pointerdown", handler, true);
|
|
4688
|
-
}
|
|
4689
|
-
if (this.closeOnBackEnabled && this.backMarker === null && typeof window !== "undefined") {
|
|
4690
|
-
this.backMarker = pushBackMarker({
|
|
4691
|
-
isOpen: () => this.isOpen_,
|
|
4692
|
-
isTop: () => this.isTop,
|
|
4693
|
-
close: () => this.close("back"),
|
|
4694
|
-
markerState: () => ({ __bsOverlay: this.id })
|
|
4695
|
-
});
|
|
4696
|
-
}
|
|
4697
|
-
}
|
|
4698
|
-
releaseInteractiveListeners() {
|
|
4699
|
-
this.detachEscape?.();
|
|
4700
|
-
this.detachEscape = null;
|
|
4701
|
-
this.detachBackdrop?.();
|
|
4702
|
-
this.detachBackdrop = null;
|
|
4703
|
-
this.detachSwipe?.();
|
|
4704
|
-
this.detachSwipe = null;
|
|
4705
|
-
this.detachOutsidePointer?.();
|
|
4706
|
-
this.detachOutsidePointer = null;
|
|
4707
|
-
this.lifecycle.release();
|
|
4708
|
-
}
|
|
4709
|
-
installSwipeToClose() {
|
|
4710
|
-
return installOverlaySwipe({
|
|
4711
|
-
element: this.element,
|
|
4712
|
-
edge: this.edge,
|
|
4713
|
-
getThreshold: () => this.swipeThreshold,
|
|
4714
|
-
getVelocityThreshold: () => this.swipeVelocityThreshold,
|
|
4715
|
-
getExitTransition: () => `transform ${this.effectiveDuration()}ms ${this.exitEasing}`,
|
|
4716
|
-
getOpenTransform: () => openTransformFor(this.enterAnimation),
|
|
4717
|
-
close: () => void this.close("swipe")
|
|
4718
|
-
});
|
|
4719
|
-
}
|
|
4720
|
-
registerInStack() {
|
|
4721
|
-
this.releaseStackEntry = sheetStack.push({
|
|
4722
|
-
id: this.id,
|
|
4723
|
-
setZIndex: (z) => {
|
|
4724
|
-
this.element.style.zIndex = String(z);
|
|
4725
|
-
if (this.backdrop) this.backdrop.style.zIndex = String(z - 1);
|
|
4726
|
-
},
|
|
4727
|
-
setIsTop: (isTop) => {
|
|
4728
|
-
this.isTop = isTop;
|
|
4729
|
-
if (this.backdrop) {
|
|
4730
|
-
this.backdrop.style.display = isTop ? "" : "none";
|
|
4731
|
-
}
|
|
4732
|
-
},
|
|
4733
|
-
isOpen: () => this.isOpen_
|
|
4734
|
-
});
|
|
4735
|
-
}
|
|
4736
|
-
};
|
|
4737
|
-
var createOverlay = (opts) => new OverlayEngine(opts);
|
|
4738
|
-
|
|
4739
4259
|
exports.BottomSheetCore = BottomSheetCore;
|
|
4740
4260
|
exports.BottomSheetEngine = BottomSheetEngine;
|
|
4741
|
-
exports.DEFAULT_SPRING = DEFAULT_SPRING;
|
|
4742
|
-
exports.OVERLAY_PRESETS = OVERLAY_PRESETS;
|
|
4743
|
-
exports.Overlay = OverlayEngine;
|
|
4744
|
-
exports.OverlayEngine = OverlayEngine;
|
|
4745
4261
|
exports.SCRIM_PRESETS = SCRIM_PRESETS;
|
|
4746
|
-
exports.allowedRange = allowedRange;
|
|
4747
4262
|
exports.applyOverlayPosition = applyOverlayPosition;
|
|
4748
|
-
exports.attachGestures = attachGestures;
|
|
4749
4263
|
exports.autoCollapseFeature = autoCollapseFeature;
|
|
4750
4264
|
exports.contentSwipeFeature = contentSwipeFeature;
|
|
4751
|
-
exports.createOverlay = createOverlay;
|
|
4752
4265
|
exports.createSheetManager = createSheetManager;
|
|
4753
4266
|
exports.defaultEngineFeatures = defaultEngineFeatures;
|
|
4754
|
-
exports.easeOutBack = easeOutBack;
|
|
4755
|
-
exports.easeOutCubic = easeOutCubic;
|
|
4756
|
-
exports.findById = findById;
|
|
4757
|
-
exports.findNearest = findNearest;
|
|
4758
4267
|
exports.installFocusTrap = installFocusTrap;
|
|
4759
4268
|
exports.installGestures = installGestures;
|
|
4760
4269
|
exports.lockBodyScroll = lockBodyScroll;
|
|
4761
4270
|
exports.persistFeature = persistFeature;
|
|
4762
|
-
exports.prefersReducedMotion = prefersReducedMotion;
|
|
4763
4271
|
exports.resolveSheetAnchoredStyle = resolveSheetAnchoredStyle;
|
|
4764
4272
|
exports.resolveSnap = resolveSnap;
|
|
4765
4273
|
exports.resolveSnapList = resolveSnapList;
|
|
4766
4274
|
exports.routeFeature = routeFeature;
|
|
4767
4275
|
exports.runAnchorTransition = runAnchorTransition;
|
|
4768
|
-
exports.runSpring = runSpring;
|
|
4769
4276
|
exports.sheetStack = sheetStack;
|
|
4770
|
-
exports.tween = tween;
|
|
4771
4277
|
exports.visualViewportFeature = visualViewportFeature;
|
|
4772
4278
|
//# sourceMappingURL=index.cjs.map
|
|
4773
4279
|
//# sourceMappingURL=index.cjs.map
|