@surdeddd/bottom-sheet 0.12.0 → 0.14.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 +85 -1
- package/dist/{BottomSheetEngine-D6oiEfZ4.d.cts → BottomSheetCore-Cp7dWy91.d.cts} +85 -5
- package/dist/{BottomSheetEngine-Dhy0X_e9.d.ts → BottomSheetCore-DJYwWOqt.d.ts} +85 -5
- package/dist/BottomSheetEngine-Lm7HIVHv.d.cts +7 -0
- package/dist/BottomSheetEngine-O5PbeKfe.d.ts +7 -0
- package/dist/core.cjs +3680 -0
- package/dist/core.d.cts +3 -0
- package/dist/core.d.ts +3 -0
- package/dist/core.js +3678 -0
- package/dist/debug.cjs +109 -0
- package/dist/debug.d.cts +22 -0
- package/dist/debug.d.ts +22 -0
- package/dist/debug.js +107 -0
- package/dist/element.cjs +1314 -829
- package/dist/element.d.cts +2 -1
- package/dist/element.d.ts +2 -1
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +1314 -829
- package/dist/features.cjs +489 -0
- package/dist/features.d.cts +13 -0
- package/dist/features.d.ts +13 -0
- package/dist/features.js +482 -0
- package/dist/index-Bb5TRmyg.d.cts +9 -0
- package/dist/index-Cl9ebCP2.d.ts +9 -0
- package/dist/index.cjs +979 -1293
- package/dist/index.d.cts +43 -55
- package/dist/index.d.ts +43 -55
- package/dist/index.js +973 -1280
- 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 +11 -10
- package/dist/overlay.js +11 -10
- package/dist/preact.d.cts +2 -1
- package/dist/preact.d.ts +2 -1
- package/dist/qwik-lib/index.qwik.cjs +4418 -0
- package/dist/qwik-lib/index.qwik.mjs +4418 -0
- package/dist/qwik.cjs +1089 -657
- package/dist/qwik.d.cts +4 -2
- package/dist/qwik.d.ts +4 -2
- package/dist/qwik.js +1089 -657
- package/dist/react.cjs +1100 -665
- package/dist/react.d.cts +3 -3
- package/dist/react.d.ts +3 -3
- package/dist/react.js +1100 -665
- package/dist/solid.cjs +1095 -657
- package/dist/solid.d.cts +90 -4
- package/dist/solid.d.ts +90 -4
- package/dist/solid.js +1095 -657
- package/dist/solid.source.jsx +1103 -657
- package/dist/styles.css +24 -4
- package/dist/svelte-core.cjs +981 -557
- package/dist/svelte-core.js +981 -557
- package/dist/svelte-src/BottomSheet.svelte +14 -0
- package/dist/svelte.cjs +1091 -657
- package/dist/svelte.d.cts +2 -0
- package/dist/svelte.d.ts +2 -0
- package/dist/svelte.js +1091 -657
- package/dist/vue.cjs +1105 -657
- package/dist/vue.js +1105 -657
- package/dist/webgl.cjs +583 -0
- package/dist/webgl.d.cts +17 -0
- package/dist/webgl.d.ts +17 -0
- package/dist/webgl.js +581 -0
- package/package.json +88 -12
package/README.md
CHANGED
|
@@ -2,7 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
> Universal, headless bottom-sheet engine. **One core, eight adapters, GPU-accelerated, fully tested.**
|
|
4
4
|
|
|
5
|
-

|
|
6
|
+

|
|
6
7
|

|
|
7
8
|

|
|
8
9
|

|
|
@@ -13,6 +14,8 @@ stacking — and the exact same engine behind every adapter.
|
|
|
13
14
|
|
|
14
15
|
## 🚀 [Live demo → bottom-sheet-demo.vercel.app](https://bottom-sheet-demo.vercel.app)
|
|
15
16
|
|
|
17
|
+
📚 [API reference (typedoc) → surdeddd.github.io/BottomSheet](https://surdeddd.github.io/BottomSheet/)
|
|
18
|
+
|
|
16
19
|
<p align="center">
|
|
17
20
|
<picture>
|
|
18
21
|
<source media="(prefers-color-scheme: dark)" srcset="docs/screenshots/sheet-dark.png" />
|
|
@@ -226,6 +229,8 @@ type SnapPoint =
|
|
|
226
229
|
| `initial` | first allowed | Snap id to start at |
|
|
227
230
|
| `mode` | `"bottom"` | `bottom`, `top`, `left`, `right` |
|
|
228
231
|
| `animation` | `"spring"` | `spring`, `tween`, `ios-spring`, `material-bounce`, `linear`, `snappy` |
|
|
232
|
+
| `settleAnimation` | off | `"waapi"` — settle runs as a compositor-driven Web Animation (pre-sampled spring keyframes); falls back to rAF automatically |
|
|
233
|
+
| `features` | all defaults | `EngineFeature[]` — override/extend the composable feature set (see Slim core below) |
|
|
229
234
|
| `spring` | snappy | `{ stiffness, damping, mass }` |
|
|
230
235
|
| `flickVelocity` | `0.65 px/ms` | Mobile flick threshold |
|
|
231
236
|
| `dragThreshold` | `18 px` | Below this, drag snaps back |
|
|
@@ -243,6 +248,8 @@ type SnapPoint =
|
|
|
243
248
|
| `persistent` | `false` | Block dismissal (backdrop / Escape / back); programmatic `close()` still works |
|
|
244
249
|
| `disableClose` | `false` | Block all closing, including programmatic |
|
|
245
250
|
| `disableDrag` | `false` | Suppress the drag gesture (imperative snaps still work) |
|
|
251
|
+
| `dragFrom` | `"handle"` | Which regions start a drag: `"handle"`, `"sheet"` (whole sheet), or `"zones"` (only `[data-bs-drag]` subtrees). Defaults to `"sheet"` when no handle is given. `[data-bs-no-drag]` opts a subtree out in every mode. Also `setDragFrom()` / `getDragFrom()` — switching remounts the gesture, no component remount |
|
|
252
|
+
| `dragFromContent` | `true` | Whether a touch gesture on the scroll container drags the sheet; override per snap point with `{ id, size, dragFromContent: false }`. Also `setDragFromContent()` |
|
|
246
253
|
| `radius` | token default | Corner radius (`string` CSS length or `number` px); also `setRadius()` |
|
|
247
254
|
| `maxHeight` | none | Cap the sheet height. `number` (px) or a string (`"92dvh"`, `"50%"`) re-resolved on viewport / orientation changes |
|
|
248
255
|
| `returnFocusTo` | opener | Focus target on dismiss — an `HTMLElement`, a selector `string`, or a `() => HTMLElement` factory |
|
|
@@ -388,6 +395,74 @@ Three deliberate choices keep things 60 fps even on mid-range Android:
|
|
|
388
395
|
propagate via CSS variables (`--bs-progress`, `--bs-size`) and direct
|
|
389
396
|
imperative subscriptions — no React re-renders on every frame.
|
|
390
397
|
|
|
398
|
+
## Slim core & composable features
|
|
399
|
+
|
|
400
|
+
The default `BottomSheetEngine` ships every optional behavior preinstalled.
|
|
401
|
+
If you only need the essentials, import the slim core (~17.5 KB gzip vs
|
|
402
|
+
~23 KB) and register just the features you use:
|
|
403
|
+
|
|
404
|
+
```ts
|
|
405
|
+
import { BottomSheetCore } from '@surdeddd/bottom-sheet/core';
|
|
406
|
+
import { routeFeature, contentSwipeFeature } from '@surdeddd/bottom-sheet/features';
|
|
407
|
+
|
|
408
|
+
const engine = new BottomSheetCore({
|
|
409
|
+
element, handle, snapPoints,
|
|
410
|
+
closeOnBack: true,
|
|
411
|
+
features: [routeFeature(), contentSwipeFeature()],
|
|
412
|
+
});
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
Optional features: `routeFeature()` (`closeOnBack` / `routedTo` /
|
|
416
|
+
`closeOnRouteChange`), `visualViewportFeature()` (soft-keyboard clamp),
|
|
417
|
+
`contentSwipeFeature()`, `persistFeature()`, `autoCollapseFeature()`.
|
|
418
|
+
Everything else (gestures, snap math, resize self-heal, a11y slider, focus
|
|
419
|
+
trap, scroll lock, scrim, stacking) is core. Setting an option whose feature
|
|
420
|
+
is missing dev-warns once and is ignored in production. Custom features
|
|
421
|
+
implement `{ name, install(ctx) }` — the same seam the built-ins use.
|
|
422
|
+
|
|
423
|
+
### WebGL renderer (opt-in)
|
|
424
|
+
|
|
425
|
+
```ts
|
|
426
|
+
import { webglRenderer } from '@surdeddd/bottom-sheet/webgl';
|
|
427
|
+
|
|
428
|
+
const engine = new BottomSheetEngine({
|
|
429
|
+
element, handle, snapPoints,
|
|
430
|
+
features: [webglRenderer({ jelly: 0.6 })],
|
|
431
|
+
});
|
|
432
|
+
```
|
|
433
|
+
|
|
434
|
+
Paints the sheet surface — panel, radii, shadow, edge sheen — on the GPU. The
|
|
435
|
+
moment a drag starts, the sheet's text is lifted into a texture so the whole
|
|
436
|
+
sheet bends as one surface, and handed straight back to the DOM once it
|
|
437
|
+
settles. Layout, scrolling, gestures and the accessibility tree never leave the
|
|
438
|
+
DOM. 4.2 KB gzip, and only if you import it.
|
|
439
|
+
Falls back to the DOM renderer, silently and mid-session if it has to, when
|
|
440
|
+
there is no WebGL, under `prefers-reduced-motion`, or when the browser drops
|
|
441
|
+
the GL context.
|
|
442
|
+
|
|
443
|
+
[Full WebGL docs →](docs/webgl.md)
|
|
444
|
+
|
|
445
|
+
### Debug overlay
|
|
446
|
+
|
|
447
|
+
```ts
|
|
448
|
+
import { attachDebugOverlay } from '@surdeddd/bottom-sheet/debug';
|
|
449
|
+
|
|
450
|
+
const detach = attachDebugOverlay(engine);
|
|
451
|
+
```
|
|
452
|
+
|
|
453
|
+
A fixed dev panel showing the active snap, live size/progress, drag/animate
|
|
454
|
+
flags and the resolved snap list — driven purely by public engine events,
|
|
455
|
+
shipped as its own entry so it costs nothing in app bundles.
|
|
456
|
+
|
|
457
|
+
### Qwik SSR
|
|
458
|
+
|
|
459
|
+
The package declares a `qwik` field pointing at
|
|
460
|
+
`dist/qwik-lib/index.qwik.mjs`. Qwik apps pick the adapter up automatically
|
|
461
|
+
as a vendor root: the consumer optimizer segments it into QRL chunks and
|
|
462
|
+
`renderToString` emits a resumable (`q:container="paused"`) sheet. No extra
|
|
463
|
+
configuration — `import { BottomSheet } from '@surdeddd/bottom-sheet/qwik'`
|
|
464
|
+
keeps working for CSR, and Qwik City SSR now works out of the box.
|
|
465
|
+
|
|
391
466
|
## Theming
|
|
392
467
|
|
|
393
468
|
All visuals are driven by CSS custom properties. Override anywhere:
|
|
@@ -477,6 +552,15 @@ The editorial demo showcases the adapters, every gesture, every mode
|
|
|
477
552
|
(`bottom · top · left · right · overlay`), and live engine readouts (active
|
|
478
553
|
snap, progress, velocity, FPS). EN/RU and light/dark toggles in the corner.
|
|
479
554
|
|
|
555
|
+
## Browser support
|
|
556
|
+
|
|
557
|
+
Baseline: Chrome/Edge 80, Safari 13.1 (iOS 13.4), Firefox 72 — set by the
|
|
558
|
+
ES2020 build target and the APIs the engine cannot work without (Pointer
|
|
559
|
+
Events, CSS custom properties, `ResizeObserver`). Everything else, from
|
|
560
|
+
`inert` to `backdrop-filter` to WebGL, is capability-checked and degrades.
|
|
561
|
+
|
|
562
|
+
[Full support matrix →](docs/browser-support.md)
|
|
563
|
+
|
|
480
564
|
## Testing
|
|
481
565
|
|
|
482
566
|
```bash
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { T as TransformAxis } from './transform-jVfAikE9.cjs';
|
|
2
2
|
|
|
3
|
+
type DragFrom$1 = "handle" | "sheet" | "zones";
|
|
4
|
+
|
|
3
5
|
type SnapPoint = number | `${number}%` | "fit" | "content" | "full" | (string & {});
|
|
4
6
|
type SnapPointDef<Id extends string = string> = {
|
|
5
7
|
id: Id;
|
|
6
8
|
size: SnapPoint;
|
|
9
|
+
dragFromContent?: boolean;
|
|
7
10
|
};
|
|
8
11
|
type SnapId<T extends readonly SnapPointDef<string>[] | {
|
|
9
12
|
snapPoints: readonly SnapPointDef<string>[];
|
|
@@ -11,6 +14,8 @@ type SnapId<T extends readonly SnapPointDef<string>[] | {
|
|
|
11
14
|
snapPoints: readonly SnapPointDef<infer U>[];
|
|
12
15
|
} ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
|
|
13
16
|
type SheetMode = TransformAxis;
|
|
17
|
+
type DragFrom = DragFrom$1;
|
|
18
|
+
type DragSurfaceKind = "content";
|
|
14
19
|
type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
|
|
15
20
|
type ScrimPresetConfig = {
|
|
16
21
|
color: string;
|
|
@@ -93,6 +98,8 @@ type EngineOptions = {
|
|
|
93
98
|
respectReducedMotion?: boolean;
|
|
94
99
|
flickVelocity?: number;
|
|
95
100
|
dragThreshold?: number;
|
|
101
|
+
dragFrom?: DragFrom;
|
|
102
|
+
dragFromContent?: boolean;
|
|
96
103
|
rubberBand?: boolean;
|
|
97
104
|
backdropRange?: [number, number];
|
|
98
105
|
screenRange?: [number, number];
|
|
@@ -103,6 +110,7 @@ type EngineOptions = {
|
|
|
103
110
|
scrimTapToClose?: boolean;
|
|
104
111
|
scrimPreset?: ScrimPreset;
|
|
105
112
|
animation?: "spring" | "tween" | "ios-spring" | "material-bounce" | "linear" | "snappy";
|
|
113
|
+
settleAnimation?: "waapi";
|
|
106
114
|
spring?: {
|
|
107
115
|
stiffness?: number;
|
|
108
116
|
damping?: number;
|
|
@@ -127,15 +135,65 @@ type EngineOptions = {
|
|
|
127
135
|
linkedSheets?: BottomSheetEngineLike[];
|
|
128
136
|
viewTransitions?: boolean;
|
|
129
137
|
stackEffect?: boolean;
|
|
138
|
+
features?: EngineFeature[];
|
|
130
139
|
};
|
|
131
140
|
|
|
132
|
-
type BottomSheetEngineLike =
|
|
141
|
+
type BottomSheetEngineLike = BottomSheetCore;
|
|
142
|
+
type EngineFeatureStage = "attach" | "post";
|
|
143
|
+
type EngineFeatureOptions = {
|
|
144
|
+
routedTo?: string;
|
|
145
|
+
closeOnBack: boolean;
|
|
146
|
+
closeOnRouteChange: boolean;
|
|
147
|
+
persistKey?: string;
|
|
148
|
+
autoCollapseAfter?: number;
|
|
149
|
+
};
|
|
150
|
+
type EngineFeatureContext = {
|
|
151
|
+
element: HTMLElement;
|
|
152
|
+
scrollContainer?: HTMLElement;
|
|
153
|
+
sheetId: string;
|
|
154
|
+
options: EngineFeatureOptions;
|
|
155
|
+
isDestroyed: () => boolean;
|
|
156
|
+
isDragging: () => boolean;
|
|
157
|
+
isAnimating: () => boolean;
|
|
158
|
+
isTopSheet: () => boolean;
|
|
159
|
+
isVerticalAxis: () => boolean;
|
|
160
|
+
getSize: () => number;
|
|
161
|
+
getActiveId: () => string;
|
|
162
|
+
getAllowedIds: () => string[];
|
|
163
|
+
allowedIdsBySize: () => string[];
|
|
164
|
+
getMaxAxisSize: () => number;
|
|
165
|
+
resolveSnap: (id: string) => {
|
|
166
|
+
id: string;
|
|
167
|
+
size: number;
|
|
168
|
+
} | null;
|
|
169
|
+
resolveActiveSnap: () => {
|
|
170
|
+
id: string;
|
|
171
|
+
size: number;
|
|
172
|
+
} | null;
|
|
173
|
+
setSize: (size: number) => void;
|
|
174
|
+
setMaxAxisSize: (size: number) => void;
|
|
175
|
+
applySize: (size: number) => void;
|
|
176
|
+
recomputeSnaps: () => void;
|
|
177
|
+
newCycle: () => void;
|
|
178
|
+
cancelInFlight: () => void;
|
|
179
|
+
resyncAfterResize: () => void;
|
|
180
|
+
snapTo: (id: string) => void;
|
|
181
|
+
close: (reason?: CloseReason) => Promise<void>;
|
|
182
|
+
attachDragSurface: (surface: HTMLElement, kind: DragSurfaceKind) => (() => void) | void;
|
|
183
|
+
on: <K extends keyof SheetEventMap>(event: K, fn: (payload: SheetEventMap[K]) => void) => () => void;
|
|
184
|
+
addTeardown: (fn: (() => void) | null | undefined) => void;
|
|
185
|
+
};
|
|
186
|
+
type EngineFeature = {
|
|
187
|
+
name: string;
|
|
188
|
+
stage?: EngineFeatureStage;
|
|
189
|
+
install: (ctx: EngineFeatureContext) => (() => void) | void;
|
|
190
|
+
};
|
|
133
191
|
type TeardownScope = {
|
|
134
192
|
add: (fn: (() => void) | null | undefined) => void;
|
|
135
193
|
};
|
|
136
194
|
type Plugin = {
|
|
137
195
|
name: string;
|
|
138
|
-
install: (engine:
|
|
196
|
+
install: (engine: BottomSheetCore, scope: TeardownScope) => void | (() => void);
|
|
139
197
|
};
|
|
140
198
|
type EngineState = {
|
|
141
199
|
size: number;
|
|
@@ -200,7 +258,7 @@ type ScrimStagesOptions = {
|
|
|
200
258
|
};
|
|
201
259
|
|
|
202
260
|
type Listener<K extends keyof SheetEventMap> = (payload: SheetEventMap[K]) => void;
|
|
203
|
-
declare class
|
|
261
|
+
declare class BottomSheetCore {
|
|
204
262
|
private id;
|
|
205
263
|
private element;
|
|
206
264
|
private handle;
|
|
@@ -211,6 +269,8 @@ declare class BottomSheetEngine {
|
|
|
211
269
|
private mode;
|
|
212
270
|
private flickVelocity;
|
|
213
271
|
private dragThreshold;
|
|
272
|
+
private dragFromMode;
|
|
273
|
+
private dragFromContentDefault;
|
|
214
274
|
private rubberBandEnabled;
|
|
215
275
|
private scrim;
|
|
216
276
|
private aria;
|
|
@@ -228,8 +288,11 @@ declare class BottomSheetEngine {
|
|
|
228
288
|
private activeId;
|
|
229
289
|
private size;
|
|
230
290
|
private gesture;
|
|
291
|
+
private contentGesture;
|
|
292
|
+
private detachSheetGesture;
|
|
231
293
|
private rootEl;
|
|
232
294
|
private destroyed;
|
|
295
|
+
private restClosed;
|
|
233
296
|
private currentViewTransition;
|
|
234
297
|
private currentAbort;
|
|
235
298
|
private sizeWriteSentinel;
|
|
@@ -252,11 +315,16 @@ declare class BottomSheetEngine {
|
|
|
252
315
|
private stackEffectPrimed;
|
|
253
316
|
private fitDeps;
|
|
254
317
|
private transformTemplate;
|
|
318
|
+
private featureList;
|
|
319
|
+
private featureCtx;
|
|
255
320
|
constructor(opts: EngineOptions);
|
|
321
|
+
private buildFeatureContext;
|
|
322
|
+
private runFeatureStage;
|
|
323
|
+
private warnOrphanFeatureOptions;
|
|
256
324
|
get state(): EngineState;
|
|
257
325
|
on<K extends keyof SheetEventMap>(event: K, fn: Listener<K>): () => void;
|
|
258
326
|
use(plugin: Plugin): this;
|
|
259
|
-
setLinkedSheets(sheets:
|
|
327
|
+
setLinkedSheets(sheets: BottomSheetCore[]): void;
|
|
260
328
|
getAllowedIds(): string[];
|
|
261
329
|
getResolvedSnaps(): readonly {
|
|
262
330
|
id: string;
|
|
@@ -267,6 +335,7 @@ declare class BottomSheetEngine {
|
|
|
267
335
|
signal?: AbortSignal;
|
|
268
336
|
}, _skipBeforeSnap?: boolean): Promise<void>;
|
|
269
337
|
private completeSnap;
|
|
338
|
+
private setRestClosed;
|
|
270
339
|
private emitOpenSequence;
|
|
271
340
|
private emitCloseSequence;
|
|
272
341
|
dragTo(targetSize: number, velocityOrOpts?: number | {
|
|
@@ -279,6 +348,9 @@ declare class BottomSheetEngine {
|
|
|
279
348
|
setPersistent(value: boolean): void;
|
|
280
349
|
setDisableClose(value: boolean): void;
|
|
281
350
|
setDisableDrag(value: boolean): void;
|
|
351
|
+
setDragFromContent(value: boolean): void;
|
|
352
|
+
setDragFrom(mode: DragFrom$1): void;
|
|
353
|
+
getDragFrom(): DragFrom$1;
|
|
282
354
|
isTop(): boolean;
|
|
283
355
|
depth(): number;
|
|
284
356
|
expand(): Promise<void>;
|
|
@@ -318,9 +390,17 @@ declare class BottomSheetEngine {
|
|
|
318
390
|
private updateAriaSlider;
|
|
319
391
|
private registerInStack;
|
|
320
392
|
private applyStackDepth;
|
|
393
|
+
private buildGestureDeps;
|
|
394
|
+
private isContentDragAllowed;
|
|
395
|
+
private decideContentDrag;
|
|
396
|
+
private attachDragSurface;
|
|
397
|
+
private sheetDragSurface;
|
|
398
|
+
private canStartSheetDrag;
|
|
399
|
+
private mountSheetGesture;
|
|
321
400
|
private attach;
|
|
322
401
|
private attachFeatures;
|
|
323
402
|
private settleAfterDrag;
|
|
403
|
+
private isDraggingAny;
|
|
324
404
|
private clearWillChangeIfIdle;
|
|
325
405
|
private haptic;
|
|
326
406
|
private applySize;
|
|
@@ -330,4 +410,4 @@ declare class BottomSheetEngine {
|
|
|
330
410
|
private handleClose;
|
|
331
411
|
}
|
|
332
412
|
|
|
333
|
-
export { type AnchorOptions as A,
|
|
413
|
+
export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };
|
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
import { T as TransformAxis } from './transform-jVfAikE9.js';
|
|
2
2
|
|
|
3
|
+
type DragFrom$1 = "handle" | "sheet" | "zones";
|
|
4
|
+
|
|
3
5
|
type SnapPoint = number | `${number}%` | "fit" | "content" | "full" | (string & {});
|
|
4
6
|
type SnapPointDef<Id extends string = string> = {
|
|
5
7
|
id: Id;
|
|
6
8
|
size: SnapPoint;
|
|
9
|
+
dragFromContent?: boolean;
|
|
7
10
|
};
|
|
8
11
|
type SnapId<T extends readonly SnapPointDef<string>[] | {
|
|
9
12
|
snapPoints: readonly SnapPointDef<string>[];
|
|
@@ -11,6 +14,8 @@ type SnapId<T extends readonly SnapPointDef<string>[] | {
|
|
|
11
14
|
snapPoints: readonly SnapPointDef<infer U>[];
|
|
12
15
|
} ? U : T extends readonly SnapPointDef<infer U>[] ? U : never;
|
|
13
16
|
type SheetMode = TransformAxis;
|
|
17
|
+
type DragFrom = DragFrom$1;
|
|
18
|
+
type DragSurfaceKind = "content";
|
|
14
19
|
type ScrimPreset = "subtle" | "standard" | "monitoring" | "cinematic";
|
|
15
20
|
type ScrimPresetConfig = {
|
|
16
21
|
color: string;
|
|
@@ -93,6 +98,8 @@ type EngineOptions = {
|
|
|
93
98
|
respectReducedMotion?: boolean;
|
|
94
99
|
flickVelocity?: number;
|
|
95
100
|
dragThreshold?: number;
|
|
101
|
+
dragFrom?: DragFrom;
|
|
102
|
+
dragFromContent?: boolean;
|
|
96
103
|
rubberBand?: boolean;
|
|
97
104
|
backdropRange?: [number, number];
|
|
98
105
|
screenRange?: [number, number];
|
|
@@ -103,6 +110,7 @@ type EngineOptions = {
|
|
|
103
110
|
scrimTapToClose?: boolean;
|
|
104
111
|
scrimPreset?: ScrimPreset;
|
|
105
112
|
animation?: "spring" | "tween" | "ios-spring" | "material-bounce" | "linear" | "snappy";
|
|
113
|
+
settleAnimation?: "waapi";
|
|
106
114
|
spring?: {
|
|
107
115
|
stiffness?: number;
|
|
108
116
|
damping?: number;
|
|
@@ -127,15 +135,65 @@ type EngineOptions = {
|
|
|
127
135
|
linkedSheets?: BottomSheetEngineLike[];
|
|
128
136
|
viewTransitions?: boolean;
|
|
129
137
|
stackEffect?: boolean;
|
|
138
|
+
features?: EngineFeature[];
|
|
130
139
|
};
|
|
131
140
|
|
|
132
|
-
type BottomSheetEngineLike =
|
|
141
|
+
type BottomSheetEngineLike = BottomSheetCore;
|
|
142
|
+
type EngineFeatureStage = "attach" | "post";
|
|
143
|
+
type EngineFeatureOptions = {
|
|
144
|
+
routedTo?: string;
|
|
145
|
+
closeOnBack: boolean;
|
|
146
|
+
closeOnRouteChange: boolean;
|
|
147
|
+
persistKey?: string;
|
|
148
|
+
autoCollapseAfter?: number;
|
|
149
|
+
};
|
|
150
|
+
type EngineFeatureContext = {
|
|
151
|
+
element: HTMLElement;
|
|
152
|
+
scrollContainer?: HTMLElement;
|
|
153
|
+
sheetId: string;
|
|
154
|
+
options: EngineFeatureOptions;
|
|
155
|
+
isDestroyed: () => boolean;
|
|
156
|
+
isDragging: () => boolean;
|
|
157
|
+
isAnimating: () => boolean;
|
|
158
|
+
isTopSheet: () => boolean;
|
|
159
|
+
isVerticalAxis: () => boolean;
|
|
160
|
+
getSize: () => number;
|
|
161
|
+
getActiveId: () => string;
|
|
162
|
+
getAllowedIds: () => string[];
|
|
163
|
+
allowedIdsBySize: () => string[];
|
|
164
|
+
getMaxAxisSize: () => number;
|
|
165
|
+
resolveSnap: (id: string) => {
|
|
166
|
+
id: string;
|
|
167
|
+
size: number;
|
|
168
|
+
} | null;
|
|
169
|
+
resolveActiveSnap: () => {
|
|
170
|
+
id: string;
|
|
171
|
+
size: number;
|
|
172
|
+
} | null;
|
|
173
|
+
setSize: (size: number) => void;
|
|
174
|
+
setMaxAxisSize: (size: number) => void;
|
|
175
|
+
applySize: (size: number) => void;
|
|
176
|
+
recomputeSnaps: () => void;
|
|
177
|
+
newCycle: () => void;
|
|
178
|
+
cancelInFlight: () => void;
|
|
179
|
+
resyncAfterResize: () => void;
|
|
180
|
+
snapTo: (id: string) => void;
|
|
181
|
+
close: (reason?: CloseReason) => Promise<void>;
|
|
182
|
+
attachDragSurface: (surface: HTMLElement, kind: DragSurfaceKind) => (() => void) | void;
|
|
183
|
+
on: <K extends keyof SheetEventMap>(event: K, fn: (payload: SheetEventMap[K]) => void) => () => void;
|
|
184
|
+
addTeardown: (fn: (() => void) | null | undefined) => void;
|
|
185
|
+
};
|
|
186
|
+
type EngineFeature = {
|
|
187
|
+
name: string;
|
|
188
|
+
stage?: EngineFeatureStage;
|
|
189
|
+
install: (ctx: EngineFeatureContext) => (() => void) | void;
|
|
190
|
+
};
|
|
133
191
|
type TeardownScope = {
|
|
134
192
|
add: (fn: (() => void) | null | undefined) => void;
|
|
135
193
|
};
|
|
136
194
|
type Plugin = {
|
|
137
195
|
name: string;
|
|
138
|
-
install: (engine:
|
|
196
|
+
install: (engine: BottomSheetCore, scope: TeardownScope) => void | (() => void);
|
|
139
197
|
};
|
|
140
198
|
type EngineState = {
|
|
141
199
|
size: number;
|
|
@@ -200,7 +258,7 @@ type ScrimStagesOptions = {
|
|
|
200
258
|
};
|
|
201
259
|
|
|
202
260
|
type Listener<K extends keyof SheetEventMap> = (payload: SheetEventMap[K]) => void;
|
|
203
|
-
declare class
|
|
261
|
+
declare class BottomSheetCore {
|
|
204
262
|
private id;
|
|
205
263
|
private element;
|
|
206
264
|
private handle;
|
|
@@ -211,6 +269,8 @@ declare class BottomSheetEngine {
|
|
|
211
269
|
private mode;
|
|
212
270
|
private flickVelocity;
|
|
213
271
|
private dragThreshold;
|
|
272
|
+
private dragFromMode;
|
|
273
|
+
private dragFromContentDefault;
|
|
214
274
|
private rubberBandEnabled;
|
|
215
275
|
private scrim;
|
|
216
276
|
private aria;
|
|
@@ -228,8 +288,11 @@ declare class BottomSheetEngine {
|
|
|
228
288
|
private activeId;
|
|
229
289
|
private size;
|
|
230
290
|
private gesture;
|
|
291
|
+
private contentGesture;
|
|
292
|
+
private detachSheetGesture;
|
|
231
293
|
private rootEl;
|
|
232
294
|
private destroyed;
|
|
295
|
+
private restClosed;
|
|
233
296
|
private currentViewTransition;
|
|
234
297
|
private currentAbort;
|
|
235
298
|
private sizeWriteSentinel;
|
|
@@ -252,11 +315,16 @@ declare class BottomSheetEngine {
|
|
|
252
315
|
private stackEffectPrimed;
|
|
253
316
|
private fitDeps;
|
|
254
317
|
private transformTemplate;
|
|
318
|
+
private featureList;
|
|
319
|
+
private featureCtx;
|
|
255
320
|
constructor(opts: EngineOptions);
|
|
321
|
+
private buildFeatureContext;
|
|
322
|
+
private runFeatureStage;
|
|
323
|
+
private warnOrphanFeatureOptions;
|
|
256
324
|
get state(): EngineState;
|
|
257
325
|
on<K extends keyof SheetEventMap>(event: K, fn: Listener<K>): () => void;
|
|
258
326
|
use(plugin: Plugin): this;
|
|
259
|
-
setLinkedSheets(sheets:
|
|
327
|
+
setLinkedSheets(sheets: BottomSheetCore[]): void;
|
|
260
328
|
getAllowedIds(): string[];
|
|
261
329
|
getResolvedSnaps(): readonly {
|
|
262
330
|
id: string;
|
|
@@ -267,6 +335,7 @@ declare class BottomSheetEngine {
|
|
|
267
335
|
signal?: AbortSignal;
|
|
268
336
|
}, _skipBeforeSnap?: boolean): Promise<void>;
|
|
269
337
|
private completeSnap;
|
|
338
|
+
private setRestClosed;
|
|
270
339
|
private emitOpenSequence;
|
|
271
340
|
private emitCloseSequence;
|
|
272
341
|
dragTo(targetSize: number, velocityOrOpts?: number | {
|
|
@@ -279,6 +348,9 @@ declare class BottomSheetEngine {
|
|
|
279
348
|
setPersistent(value: boolean): void;
|
|
280
349
|
setDisableClose(value: boolean): void;
|
|
281
350
|
setDisableDrag(value: boolean): void;
|
|
351
|
+
setDragFromContent(value: boolean): void;
|
|
352
|
+
setDragFrom(mode: DragFrom$1): void;
|
|
353
|
+
getDragFrom(): DragFrom$1;
|
|
282
354
|
isTop(): boolean;
|
|
283
355
|
depth(): number;
|
|
284
356
|
expand(): Promise<void>;
|
|
@@ -318,9 +390,17 @@ declare class BottomSheetEngine {
|
|
|
318
390
|
private updateAriaSlider;
|
|
319
391
|
private registerInStack;
|
|
320
392
|
private applyStackDepth;
|
|
393
|
+
private buildGestureDeps;
|
|
394
|
+
private isContentDragAllowed;
|
|
395
|
+
private decideContentDrag;
|
|
396
|
+
private attachDragSurface;
|
|
397
|
+
private sheetDragSurface;
|
|
398
|
+
private canStartSheetDrag;
|
|
399
|
+
private mountSheetGesture;
|
|
321
400
|
private attach;
|
|
322
401
|
private attachFeatures;
|
|
323
402
|
private settleAfterDrag;
|
|
403
|
+
private isDraggingAny;
|
|
324
404
|
private clearWillChangeIfIdle;
|
|
325
405
|
private haptic;
|
|
326
406
|
private applySize;
|
|
@@ -330,4 +410,4 @@ declare class BottomSheetEngine {
|
|
|
330
410
|
private handleClose;
|
|
331
411
|
}
|
|
332
412
|
|
|
333
|
-
export { type AnchorOptions as A,
|
|
413
|
+
export { type AnchorOptions as A, BottomSheetCore as B, type CloseReason as C, type EngineState as E, type Plugin as P, type ScrimStagesOptions as S, type TeardownScope as T, type EngineOptions as a, type SnapPointDef as b, type SheetMode as c, type SheetEventMap as d, type SnapPoint as e, type EngineFeature as f, type ScrimOverlayPosition as g, type AnchorAnimationPreset as h, type AnchorAnimationSpec as i, type AnchorHandle as j, type AnchorPosition as k, type AnchorState as l, type EngineFeatureContext as m, type EngineFeatureOptions as n, type EngineFeatureStage as o, SCRIM_PRESETS as p, type ScrimOverlayOptions as q, type ScrimPreset as r, type ScrimPresetConfig as s, type ScrimStageDef as t, type ScrimUpdate as u, type SnapId as v, runAnchorTransition as w };
|