@surdeddd/bottom-sheet 0.1.0 → 0.2.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 +6 -0
- package/dist/BottomSheetEngine-CIT9Htti.d.cts +219 -0
- package/dist/BottomSheetEngine-Df9MwBbm.d.ts +219 -0
- package/dist/element.cjs +95 -440
- package/dist/element.d.cts +3 -56
- package/dist/element.d.ts +3 -56
- package/dist/element.iife.global.js +2 -2
- package/dist/element.js +95 -440
- package/dist/index.cjs +84 -494
- package/dist/index.d.cts +3 -84
- package/dist/index.d.ts +3 -84
- package/dist/index.js +84 -494
- package/dist/integrations/formik.d.cts +2 -8
- package/dist/integrations/formik.d.ts +2 -8
- package/dist/integrations/react-hook-form.d.cts +2 -11
- package/dist/integrations/react-hook-form.d.ts +2 -11
- package/dist/overlay.cjs +0 -87
- package/dist/overlay.d.cts +1 -137
- package/dist/overlay.d.ts +1 -137
- package/dist/overlay.js +0 -87
- package/dist/preact.d.cts +2 -2
- package/dist/preact.d.ts +2 -2
- package/dist/preact.js +0 -1
- package/dist/qwik.cjs +87 -439
- package/dist/qwik.d.cts +3 -24
- package/dist/qwik.d.ts +3 -24
- package/dist/qwik.js +87 -439
- package/dist/react.cjs +91 -496
- package/dist/react.d.cts +16 -158
- package/dist/react.d.ts +16 -158
- package/dist/react.js +91 -496
- package/dist/solid.cjs +87 -439
- package/dist/solid.d.cts +4 -31
- package/dist/solid.d.ts +4 -31
- package/dist/solid.js +87 -439
- package/dist/styles.css +27 -102
- package/dist/svelte.cjs +139 -462
- package/dist/svelte.d.ts +9 -2
- package/dist/svelte.js +139 -462
- package/dist/themes/ios.css +0 -3
- package/dist/themes/material.css +0 -3
- package/dist/themes/vercel.css +0 -3
- package/dist/{transform-Brkf-wzo.d.cts → transform-jVfAikE9.d.cts} +0 -1
- package/dist/{transform-Brkf-wzo.d.ts → transform-jVfAikE9.d.ts} +0 -1
- package/dist/vue.cjs +104 -446
- package/dist/vue.d.ts +7 -1
- package/dist/vue.js +105 -447
- package/package.json +3 -3
- package/dist/BottomSheetEngine-CvSVbo6c.d.cts +0 -704
- package/dist/BottomSheetEngine-DbO8rW_3.d.ts +0 -704
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as SheetEventMap } from '../BottomSheetEngine-
|
|
2
|
-
import '../transform-
|
|
1
|
+
import { d as SheetEventMap } from '../BottomSheetEngine-CIT9Htti.cjs';
|
|
2
|
+
import '../transform-jVfAikE9.cjs';
|
|
3
3
|
|
|
4
4
|
type FormikStateLike = {
|
|
5
5
|
dirty: boolean;
|
|
@@ -16,12 +16,6 @@ type SheetGuardRef = {
|
|
|
16
16
|
type FormikRefLike = {
|
|
17
17
|
current: FormikStateLike | null | undefined;
|
|
18
18
|
};
|
|
19
|
-
/**
|
|
20
|
-
* Formik counterpart to useFormGuard — takes a `ref<FormikProps>` because
|
|
21
|
-
* Formik's render-prop API doesn't surface props at hook-call time the way
|
|
22
|
-
* useForm() does. Use `<Formik innerRef={formikRef}>` or stash `useFormik()`
|
|
23
|
-
* on a ref yourself.
|
|
24
|
-
*/
|
|
25
19
|
declare function useFormikGuard<Values extends Record<string, unknown> = Record<string, unknown>>(sheetRef: SheetGuardRef, formikRef: FormikRefLike, _tag?: Values): void;
|
|
26
20
|
|
|
27
21
|
export { type FormikRefLike, type FormikStateLike, type SheetEventTarget, type SheetGuardRef, useFormikGuard };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as SheetEventMap } from '../BottomSheetEngine-
|
|
2
|
-
import '../transform-
|
|
1
|
+
import { d as SheetEventMap } from '../BottomSheetEngine-Df9MwBbm.js';
|
|
2
|
+
import '../transform-jVfAikE9.js';
|
|
3
3
|
|
|
4
4
|
type FormikStateLike = {
|
|
5
5
|
dirty: boolean;
|
|
@@ -16,12 +16,6 @@ type SheetGuardRef = {
|
|
|
16
16
|
type FormikRefLike = {
|
|
17
17
|
current: FormikStateLike | null | undefined;
|
|
18
18
|
};
|
|
19
|
-
/**
|
|
20
|
-
* Formik counterpart to useFormGuard — takes a `ref<FormikProps>` because
|
|
21
|
-
* Formik's render-prop API doesn't surface props at hook-call time the way
|
|
22
|
-
* useForm() does. Use `<Formik innerRef={formikRef}>` or stash `useFormik()`
|
|
23
|
-
* on a ref yourself.
|
|
24
|
-
*/
|
|
25
19
|
declare function useFormikGuard<Values extends Record<string, unknown> = Record<string, unknown>>(sheetRef: SheetGuardRef, formikRef: FormikRefLike, _tag?: Values): void;
|
|
26
20
|
|
|
27
21
|
export { type FormikRefLike, type FormikStateLike, type SheetEventTarget, type SheetGuardRef, useFormikGuard };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as SheetEventMap } from '../BottomSheetEngine-
|
|
2
|
-
import '../transform-
|
|
1
|
+
import { d as SheetEventMap } from '../BottomSheetEngine-CIT9Htti.cjs';
|
|
2
|
+
import '../transform-jVfAikE9.cjs';
|
|
3
3
|
|
|
4
4
|
type RhfFormStateLike = {
|
|
5
5
|
formState: {
|
|
@@ -16,15 +16,6 @@ type SheetGuardRef = {
|
|
|
16
16
|
} | {
|
|
17
17
|
readonly current: SheetEventTarget | null | undefined;
|
|
18
18
|
};
|
|
19
|
-
/**
|
|
20
|
-
* Gates close attempts behind react-hook-form's `isDirty` / `isSubmitting`.
|
|
21
|
-
* Cancels closing while the form is dirty (consumer prompts then re-calls
|
|
22
|
-
* close) and cancels every snap while submit is in flight.
|
|
23
|
-
*
|
|
24
|
-
* The `methods` argument is read through a ref refreshed each render, so a
|
|
25
|
-
* freshly-constructed `useForm()` return on each parent render is safe —
|
|
26
|
-
* the listener always reads live form state, never a closure-captured one.
|
|
27
|
-
*/
|
|
28
19
|
declare function useFormGuard<TFieldValues extends Record<string, unknown> = Record<string, unknown>>(sheetRef: SheetGuardRef, methods: RhfFormStateLike, _tag?: TFieldValues): void;
|
|
29
20
|
|
|
30
21
|
export { type RhfFormStateLike, type SheetEventTarget, type SheetGuardRef, useFormGuard };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { d as SheetEventMap } from '../BottomSheetEngine-
|
|
2
|
-
import '../transform-
|
|
1
|
+
import { d as SheetEventMap } from '../BottomSheetEngine-Df9MwBbm.js';
|
|
2
|
+
import '../transform-jVfAikE9.js';
|
|
3
3
|
|
|
4
4
|
type RhfFormStateLike = {
|
|
5
5
|
formState: {
|
|
@@ -16,15 +16,6 @@ type SheetGuardRef = {
|
|
|
16
16
|
} | {
|
|
17
17
|
readonly current: SheetEventTarget | null | undefined;
|
|
18
18
|
};
|
|
19
|
-
/**
|
|
20
|
-
* Gates close attempts behind react-hook-form's `isDirty` / `isSubmitting`.
|
|
21
|
-
* Cancels closing while the form is dirty (consumer prompts then re-calls
|
|
22
|
-
* close) and cancels every snap while submit is in flight.
|
|
23
|
-
*
|
|
24
|
-
* The `methods` argument is read through a ref refreshed each render, so a
|
|
25
|
-
* freshly-constructed `useForm()` return on each parent render is safe —
|
|
26
|
-
* the listener always reads live form state, never a closure-captured one.
|
|
27
|
-
*/
|
|
28
19
|
declare function useFormGuard<TFieldValues extends Record<string, unknown> = Record<string, unknown>>(sheetRef: SheetGuardRef, methods: RhfFormStateLike, _tag?: TFieldValues): void;
|
|
29
20
|
|
|
30
21
|
export { type RhfFormStateLike, type SheetEventTarget, type SheetGuardRef, useFormGuard };
|
package/dist/overlay.cjs
CHANGED
|
@@ -282,12 +282,8 @@ var LifecycleController = class {
|
|
|
282
282
|
__publicField(this, "inertSiblings");
|
|
283
283
|
__publicField(this, "shouldApplyInertSiblings");
|
|
284
284
|
__publicField(this, "returnFocus");
|
|
285
|
-
/** Toggle-state teardowns — fire on close, NOT in destroy-only stack. */
|
|
286
285
|
__publicField(this, "releaseFocusTrap", null);
|
|
287
286
|
__publicField(this, "releaseScrollLock", null);
|
|
288
|
-
/** True between install() and release(). Guards release()/destroy() from
|
|
289
|
-
* re-running side effects (notably `returnFocus.focus()`) on already-
|
|
290
|
-
* released or never-installed instances. */
|
|
291
287
|
__publicField(this, "installed", false);
|
|
292
288
|
__publicField(this, "destroyed", false);
|
|
293
289
|
this.element = deps.element;
|
|
@@ -301,14 +297,6 @@ var LifecycleController = class {
|
|
|
301
297
|
this.returnFocus = opts.returnFocus;
|
|
302
298
|
this.inertSiblings = createInertSiblings(() => this.element);
|
|
303
299
|
}
|
|
304
|
-
/**
|
|
305
|
-
* Run the open-time install steps. Idempotent: each step checks its
|
|
306
|
-
* existing teardown ref so a re-open during a half-cancelled close
|
|
307
|
-
* doesn't double-install. Sets `installed=true` BEFORE the first side
|
|
308
|
-
* effect so a partial throw (detached / shadow-DOM target) leaves the
|
|
309
|
-
* caller's `release()` rollback path armed to undo whatever did succeed.
|
|
310
|
-
* No-op when destroyed.
|
|
311
|
-
*/
|
|
312
300
|
install() {
|
|
313
301
|
if (this.destroyed) return;
|
|
314
302
|
this.installed = true;
|
|
@@ -325,22 +313,10 @@ var LifecycleController = class {
|
|
|
325
313
|
this.inertSiblings.apply();
|
|
326
314
|
}
|
|
327
315
|
}
|
|
328
|
-
/**
|
|
329
|
-
* Update the post-release focus target. Overlay re-binds this when the
|
|
330
|
-
* consumer changes `returnFocus` after construction; the new value applies
|
|
331
|
-
* on the next `release()`. No-op when destroyed.
|
|
332
|
-
*/
|
|
333
316
|
setReturnFocus(target) {
|
|
334
317
|
if (this.destroyed) return;
|
|
335
318
|
this.returnFocus = target;
|
|
336
319
|
}
|
|
337
|
-
/**
|
|
338
|
-
* Release all install-time teardowns. Short-circuits when not installed,
|
|
339
|
-
* so `close() → destroy()` (each routing through here) only restores
|
|
340
|
-
* focus once. The `installed` guard lets `inertSiblings.remove()` and
|
|
341
|
-
* the focus-trap/scroll-lock teardown nullings stay simple — they were
|
|
342
|
-
* already idempotent, but `returnFocus.focus()` was firing on every call.
|
|
343
|
-
*/
|
|
344
320
|
release() {
|
|
345
321
|
if (!this.installed) return;
|
|
346
322
|
this.installed = false;
|
|
@@ -354,12 +330,6 @@ var LifecycleController = class {
|
|
|
354
330
|
target?.focus?.();
|
|
355
331
|
}
|
|
356
332
|
}
|
|
357
|
-
/**
|
|
358
|
-
* Final teardown — releases any still-installed listeners and seals the
|
|
359
|
-
* controller. After destroy(), install() is a no-op and setReturnFocus()
|
|
360
|
-
* is rejected, so post-destroy mutations can't queue up a stale focus
|
|
361
|
-
* restore.
|
|
362
|
-
*/
|
|
363
333
|
destroy() {
|
|
364
334
|
this.release();
|
|
365
335
|
this.destroyed = true;
|
|
@@ -431,8 +401,6 @@ var OverlayEngine = class {
|
|
|
431
401
|
__publicField(this, "exitEasing");
|
|
432
402
|
__publicField(this, "backdropOpacity");
|
|
433
403
|
__publicField(this, "backdropFilter");
|
|
434
|
-
// Definite-assignment: written via assignSwipeFromConfig in the
|
|
435
|
-
// constructor — TS can't follow the helper, mark the assertion explicit.
|
|
436
404
|
__publicField(this, "swipeToCloseEnabled");
|
|
437
405
|
__publicField(this, "swipeThreshold");
|
|
438
406
|
__publicField(this, "swipeVelocityThreshold");
|
|
@@ -452,13 +420,7 @@ var OverlayEngine = class {
|
|
|
452
420
|
__publicField(this, "isOpen_", false);
|
|
453
421
|
__publicField(this, "isAnimating_", false);
|
|
454
422
|
__publicField(this, "destroyed", false);
|
|
455
|
-
// Tracks whether setOverlayChildren ever populated the panel — lets
|
|
456
|
-
// clearOverlayChildren skip the DOM mutation when nothing was injected
|
|
457
|
-
// (so the field also acts as a zero-allocation feature flag).
|
|
458
423
|
__publicField(this, "hasInjectedChildren", false);
|
|
459
|
-
// Bumped on every open/close. awaitTransition captures it and ignores
|
|
460
|
-
// transitionend/timeout fired by older cycles — prevents cross-cycle
|
|
461
|
-
// listener bleed during rapid toggling.
|
|
462
424
|
__publicField(this, "cycleNonce", 0);
|
|
463
425
|
__publicField(this, "bus", createEventBus());
|
|
464
426
|
__publicField(this, "detachEscape", null);
|
|
@@ -511,9 +473,6 @@ var OverlayEngine = class {
|
|
|
511
473
|
closeOnEscape: this.closeOnEscape,
|
|
512
474
|
lockBodyScroll: this.bodyScrollLockEnabled,
|
|
513
475
|
inertSiblings: this.inertSiblingsEnabled,
|
|
514
|
-
// Overlay-specific guard: only paint body siblings inert when the
|
|
515
|
-
// overlay element is actually a body descendant. Detached / shadow-
|
|
516
|
-
// DOM / portal overlays would otherwise lock unrelated trees.
|
|
517
476
|
shouldApplyInertSiblings: () => {
|
|
518
477
|
const bodyChildren = Array.from(document.body.children);
|
|
519
478
|
return bodyChildren.some(
|
|
@@ -667,12 +626,6 @@ var OverlayEngine = class {
|
|
|
667
626
|
this.releaseStackEntry = null;
|
|
668
627
|
this.restoreMount();
|
|
669
628
|
}
|
|
670
|
-
/**
|
|
671
|
-
* Runtime visual setter — opacity is applied immediately when open so a
|
|
672
|
-
* live-controls panel can preview the change without re-opening. When
|
|
673
|
-
* closed we only stash the field; next open() picks it up so we don't
|
|
674
|
-
* mutate hidden DOM (avoids paint thrash on detached panels).
|
|
675
|
-
*/
|
|
676
629
|
setBackdropOpacity(opacity) {
|
|
677
630
|
if (this.destroyed) return;
|
|
678
631
|
this.backdropOpacity = opacity;
|
|
@@ -680,11 +633,6 @@ var OverlayEngine = class {
|
|
|
680
633
|
this.backdrop.style.opacity = String(opacity);
|
|
681
634
|
}
|
|
682
635
|
}
|
|
683
|
-
/**
|
|
684
|
-
* Runtime visual setter for `backdrop-filter`. `undefined` clears the
|
|
685
|
-
* filter (mirrors the close() behaviour). Defers to next open() when the
|
|
686
|
-
* overlay is currently closed.
|
|
687
|
-
*/
|
|
688
636
|
setBackdropFilter(filter) {
|
|
689
637
|
if (this.destroyed) return;
|
|
690
638
|
this.backdropFilter = filter;
|
|
@@ -698,12 +646,6 @@ var OverlayEngine = class {
|
|
|
698
646
|
style.webkitBackdropFilter = "";
|
|
699
647
|
}
|
|
700
648
|
}
|
|
701
|
-
/**
|
|
702
|
-
* Toggle / reconfigure swipe-to-close at runtime. Re-resolves the flat
|
|
703
|
-
* threshold fields, then installs or tears down the pointer listener so
|
|
704
|
-
* the change applies to the CURRENT open cycle. Idempotent: safe to call
|
|
705
|
-
* with the same config repeatedly.
|
|
706
|
-
*/
|
|
707
649
|
setSwipeToClose(config) {
|
|
708
650
|
if (this.destroyed) return;
|
|
709
651
|
const wasEnabled = this.swipeToCloseEnabled;
|
|
@@ -716,7 +658,6 @@ var OverlayEngine = class {
|
|
|
716
658
|
this.detachSwipe = null;
|
|
717
659
|
}
|
|
718
660
|
}
|
|
719
|
-
/** Animation setters only stage the field — applied on next open/close. */
|
|
720
661
|
setEnterAnimation(animation) {
|
|
721
662
|
if (this.destroyed) return;
|
|
722
663
|
this.enterAnimation = animation;
|
|
@@ -725,23 +666,15 @@ var OverlayEngine = class {
|
|
|
725
666
|
if (this.destroyed) return;
|
|
726
667
|
this.exitAnimation = animation;
|
|
727
668
|
}
|
|
728
|
-
/** Updates the field used at next close() — no immediate side effect. */
|
|
729
669
|
setReturnFocus(target) {
|
|
730
670
|
if (this.destroyed) return;
|
|
731
671
|
this.lifecycle.setReturnFocus(target);
|
|
732
672
|
}
|
|
733
|
-
/**
|
|
734
|
-
* Batch update — preset first, then individual overrides. Applied as a
|
|
735
|
-
* single DOM-write phase when open so live-controls don't trigger
|
|
736
|
-
* cascading reflows. Safe to call when closed (defers to next open).
|
|
737
|
-
*/
|
|
738
673
|
setOverlay(opts) {
|
|
739
674
|
if (this.destroyed) return;
|
|
740
675
|
const preset = opts.preset ? OVERLAY_PRESETS[opts.preset] : void 0;
|
|
741
676
|
const merged = preset ? {
|
|
742
677
|
backdropOpacity: preset.backdropOpacity,
|
|
743
|
-
// Preset's `undefined` filter means "no filter" — surface as null
|
|
744
|
-
// so the merged step clears the field instead of inheriting old.
|
|
745
678
|
backdropFilter: preset.backdropFilter === void 0 ? null : preset.backdropFilter,
|
|
746
679
|
swipeToClose: preset.swipeToClose,
|
|
747
680
|
enterAnimation: preset.enterAnimation,
|
|
@@ -800,30 +733,17 @@ var OverlayEngine = class {
|
|
|
800
733
|
}
|
|
801
734
|
}
|
|
802
735
|
}
|
|
803
|
-
/**
|
|
804
|
-
* Runtime children injection — replace the panel's contents without
|
|
805
|
-
* unmounting the engine. `replaceChildren()` is a single atomic DOM op,
|
|
806
|
-
* so callers can swap content rapidly without intermediate flicker.
|
|
807
|
-
* Function form is resolved exactly ONCE per call (cheap lazy content).
|
|
808
|
-
*/
|
|
809
736
|
setOverlayChildren(children) {
|
|
810
737
|
if (this.destroyed) return;
|
|
811
738
|
const node = typeof children === "function" ? children() : children;
|
|
812
739
|
this.element.replaceChildren(node);
|
|
813
740
|
this.hasInjectedChildren = true;
|
|
814
741
|
}
|
|
815
|
-
/**
|
|
816
|
-
* Clear injected children. No-op when nothing was injected so consumers
|
|
817
|
-
* who never used setOverlayChildren can call this defensively without
|
|
818
|
-
* paying for a DOM mutation.
|
|
819
|
-
*/
|
|
820
742
|
clearOverlayChildren() {
|
|
821
743
|
if (this.destroyed || !this.hasInjectedChildren) return;
|
|
822
744
|
this.element.replaceChildren();
|
|
823
745
|
this.hasInjectedChildren = false;
|
|
824
746
|
}
|
|
825
|
-
// Shared swipe-config normalizer — used by constructor, setSwipeToClose,
|
|
826
|
-
// and setOverlay so the union/object shape is decoded in exactly one place.
|
|
827
747
|
assignSwipeFromConfig(swipe) {
|
|
828
748
|
if (typeof swipe === "object" && swipe !== null) {
|
|
829
749
|
this.swipeToCloseEnabled = swipe.enabled ?? true;
|
|
@@ -967,13 +887,6 @@ var OverlayEngine = class {
|
|
|
967
887
|
this.detachOutsidePointer = null;
|
|
968
888
|
this.lifecycle.release();
|
|
969
889
|
}
|
|
970
|
-
/**
|
|
971
|
-
* Light pointer-driven dismiss. Tracks finger along the edge axis, follows
|
|
972
|
-
* with translate, dismisses if past `swipeThreshold` (fraction of panel
|
|
973
|
-
* size) or release velocity exceeds `swipeVelocityThreshold` (px/ms).
|
|
974
|
-
* Pure CSS-transform during drag — no rAF or physics required since the
|
|
975
|
-
* panel only moves one direction.
|
|
976
|
-
*/
|
|
977
890
|
installSwipeToClose() {
|
|
978
891
|
const el = this.element;
|
|
979
892
|
const edge = this.edge;
|
package/dist/overlay.d.cts
CHANGED
|
@@ -1,13 +1,5 @@
|
|
|
1
|
-
import { T as TransformAxis } from './transform-
|
|
1
|
+
import { T as TransformAxis } from './transform-jVfAikE9.cjs';
|
|
2
2
|
|
|
3
|
-
/**
|
|
4
|
-
* Slide-up panel without gestures. CSS-transition-driven, single-state.
|
|
5
|
-
* Distinct from `BottomSheetEngine`, which is gesture-driven and multi-snap.
|
|
6
|
-
*
|
|
7
|
-
* Shares scroll-lock / focus-trap / sheet-stack / inert-siblings / transform
|
|
8
|
-
* primitives with the engine so z-indices orchestrate automatically when
|
|
9
|
-
* sheets and overlays mix and feature behaviour stays consistent.
|
|
10
|
-
*/
|
|
11
3
|
type OverlayEdge = TransformAxis;
|
|
12
4
|
type OverlayAnimation = "slide" | "fade" | "scale";
|
|
13
5
|
type OverlayCloseReason = "escape" | "backdrop" | "swipe" | "back" | "programmatic" | "outside-pointer";
|
|
@@ -17,12 +9,6 @@ type SwipeToCloseConfig = {
|
|
|
17
9
|
velocityThreshold?: number;
|
|
18
10
|
};
|
|
19
11
|
type OverlayMountTarget = HTMLElement | "body" | "parent";
|
|
20
|
-
/**
|
|
21
|
-
* Named overlay archetypes — bundle the common animation + dim + gesture
|
|
22
|
-
* combinations so consumers can opt into a "mode" without restating every
|
|
23
|
-
* field. Applied BEFORE individual options at construction, and as the
|
|
24
|
-
* first step of `setOverlay()` so individual overrides win.
|
|
25
|
-
*/
|
|
26
12
|
type OverlayPreset = "sheet" | "dialog" | "sidebar" | "toast";
|
|
27
13
|
type OverlayPresetConfig = {
|
|
28
14
|
enterAnimation: OverlayAnimation;
|
|
@@ -32,12 +18,6 @@ type OverlayPresetConfig = {
|
|
|
32
18
|
swipeToClose: boolean | SwipeToCloseConfig;
|
|
33
19
|
};
|
|
34
20
|
declare const OVERLAY_PRESETS: Readonly<Record<OverlayPreset, Readonly<OverlayPresetConfig>>>;
|
|
35
|
-
/**
|
|
36
|
-
* Batch payload for `setOverlay()`. `null` on `backdropFilter` clears it
|
|
37
|
-
* (distinct from `undefined` which means "leave as-is" in the diff). Apply
|
|
38
|
-
* order: preset first, then individual overrides — single DOM-write phase
|
|
39
|
-
* if the overlay is currently open.
|
|
40
|
-
*/
|
|
41
21
|
type OverlayUpdate = {
|
|
42
22
|
backdropOpacity?: number;
|
|
43
23
|
backdropFilter?: string | null;
|
|
@@ -45,107 +25,33 @@ type OverlayUpdate = {
|
|
|
45
25
|
enterAnimation?: OverlayAnimation;
|
|
46
26
|
exitAnimation?: OverlayAnimation;
|
|
47
27
|
preset?: OverlayPreset;
|
|
48
|
-
/**
|
|
49
|
-
* Runtime children swap. `null` clears the panel's contents. A function is
|
|
50
|
-
* called once to lazy-resolve dynamic content. Applied LAST in the batch so
|
|
51
|
-
* style mutations finish before the DOM swap.
|
|
52
|
-
*/
|
|
53
28
|
children?: HTMLElement | DocumentFragment | (() => HTMLElement | DocumentFragment) | null;
|
|
54
29
|
};
|
|
55
30
|
type OverlayOptions = {
|
|
56
|
-
/** The panel element — gets transform/opacity inline writes. */
|
|
57
31
|
element: HTMLElement;
|
|
58
|
-
/** Optional dimmed backdrop element. */
|
|
59
32
|
backdrop?: HTMLElement;
|
|
60
|
-
/** Edge the panel slides in from. Default: "bottom". */
|
|
61
33
|
edge?: OverlayEdge;
|
|
62
|
-
/** Open immediately on construction. Default: false. */
|
|
63
34
|
initialOpen?: boolean;
|
|
64
|
-
/** Listen for Escape key. Default: true. */
|
|
65
35
|
closeOnEscape?: boolean;
|
|
66
|
-
/** Tap on backdrop closes. Default: true. */
|
|
67
36
|
closeOnBackdrop?: boolean;
|
|
68
|
-
/** Trap Tab focus inside the panel. Default: true. */
|
|
69
37
|
focusTrap?: boolean;
|
|
70
|
-
/** Selector or HTMLElement focused on open. */
|
|
71
38
|
initialFocus?: string | HTMLElement;
|
|
72
|
-
/**
|
|
73
|
-
* Element to focus after close. By default the focus trap restores
|
|
74
|
-
* whatever was focused before open. Pass an element or a getter for
|
|
75
|
-
* explicit control (e.g. focus a status banner instead of the trigger).
|
|
76
|
-
*/
|
|
77
39
|
returnFocus?: HTMLElement | (() => HTMLElement | null);
|
|
78
|
-
/** Lock body scroll while open. Default: true. */
|
|
79
40
|
lockBodyScroll?: boolean;
|
|
80
|
-
/** Mark page siblings `inert` while open (full a11y modal). Default: false. */
|
|
81
41
|
inertSiblings?: boolean;
|
|
82
|
-
/** Push history state so Android back closes the overlay. Default: false. */
|
|
83
42
|
closeOnBack?: boolean;
|
|
84
|
-
/** Animation duration in ms. Default: 320. */
|
|
85
43
|
duration?: number;
|
|
86
|
-
/** CSS easing for the slide-in. Default matches monitoring's bezier. */
|
|
87
44
|
enterEasing?: string;
|
|
88
|
-
/** CSS easing for the slide-out. Default: ease-in. */
|
|
89
45
|
exitEasing?: string;
|
|
90
|
-
/**
|
|
91
|
-
* Peak backdrop opacity when open. Useful when `backdropFilter` blur
|
|
92
|
-
* already darkens enough and the dim should be light (e.g. 0.3).
|
|
93
|
-
* Default: 1.
|
|
94
|
-
*/
|
|
95
46
|
backdropOpacity?: number;
|
|
96
|
-
/**
|
|
97
|
-
* CSS `backdrop-filter` value applied to the backdrop while open
|
|
98
|
-
* (e.g. `"blur(8px)"`, `"blur(12px) saturate(140%)"`). Cleared on close.
|
|
99
|
-
*/
|
|
100
47
|
backdropFilter?: string;
|
|
101
|
-
/**
|
|
102
|
-
* Allow drag-to-dismiss along the entry edge — pointer-driven. The panel
|
|
103
|
-
* follows the finger past the closed-edge axis and dismisses if the user
|
|
104
|
-
* crosses 30% of the panel size or releases with > 0.5 px/ms velocity.
|
|
105
|
-
*
|
|
106
|
-
* Pass a config object to tune thresholds:
|
|
107
|
-
* `{ enabled: true, threshold: 0.5, velocityThreshold: 1.0 }`.
|
|
108
|
-
* Default: false (CSS-only transition).
|
|
109
|
-
*/
|
|
110
48
|
swipeToClose?: boolean | SwipeToCloseConfig;
|
|
111
|
-
/**
|
|
112
|
-
* Entry animation. `"slide"` (default) translates from the edge.
|
|
113
|
-
* `"fade"` is opacity-only (no transform). `"scale"` fades + scales
|
|
114
|
-
* from 0.94 — best for centred dialogs.
|
|
115
|
-
*/
|
|
116
49
|
enterAnimation?: OverlayAnimation;
|
|
117
|
-
/** Exit animation. Defaults to `enterAnimation`. */
|
|
118
50
|
exitAnimation?: OverlayAnimation;
|
|
119
|
-
/**
|
|
120
|
-
* Move `element` to a different container on first open. `'parent'`
|
|
121
|
-
* (default) leaves it in place. `'body'` appends to `document.body`.
|
|
122
|
-
* Pass an explicit `HTMLElement` for any other portal target.
|
|
123
|
-
*
|
|
124
|
-
* Restored to its original parent on `destroy()`. Move is deferred to
|
|
125
|
-
* first `open()` so SSR / pre-mount construction doesn't crash.
|
|
126
|
-
*/
|
|
127
51
|
mountTo?: OverlayMountTarget;
|
|
128
|
-
/**
|
|
129
|
-
* `peek` keeps part of the panel visible when closed instead of
|
|
130
|
-
* translating fully off-screen. Number is treated as pixels; strings
|
|
131
|
-
* accept any CSS length (`"10dvh"`, `"clamp(40px, 8vh, 80px)"`).
|
|
132
|
-
* Only honoured when `edge: 'bottom'` — warns and falls back otherwise.
|
|
133
|
-
*/
|
|
134
52
|
peek?: number | string;
|
|
135
|
-
/**
|
|
136
|
-
* Close when a pointerdown lands outside `element` AND outside `backdrop`.
|
|
137
|
-
* Distinct from `closeOnBackdrop` — this fires even when no backdrop is
|
|
138
|
-
* mounted. Single document-level listener, removed on close.
|
|
139
|
-
*/
|
|
140
53
|
closeOnOutsidePointer?: boolean;
|
|
141
|
-
/**
|
|
142
|
-
* Named archetype — bundles `enterAnimation`/`exitAnimation`/
|
|
143
|
-
* `backdropOpacity`/`backdropFilter`/`swipeToClose` defaults. Applied
|
|
144
|
-
* BEFORE the individual options on this object, so any explicit field
|
|
145
|
-
* still wins over the preset's default.
|
|
146
|
-
*/
|
|
147
54
|
preset?: OverlayPreset;
|
|
148
|
-
/** Lifecycle callbacks. */
|
|
149
55
|
onOpen?: () => void;
|
|
150
56
|
onClose?: () => void;
|
|
151
57
|
};
|
|
@@ -213,49 +119,14 @@ declare class OverlayEngine {
|
|
|
213
119
|
close(reason?: OverlayCloseReason): Promise<void>;
|
|
214
120
|
toggle(): Promise<void>;
|
|
215
121
|
destroy(): void;
|
|
216
|
-
/**
|
|
217
|
-
* Runtime visual setter — opacity is applied immediately when open so a
|
|
218
|
-
* live-controls panel can preview the change without re-opening. When
|
|
219
|
-
* closed we only stash the field; next open() picks it up so we don't
|
|
220
|
-
* mutate hidden DOM (avoids paint thrash on detached panels).
|
|
221
|
-
*/
|
|
222
122
|
setBackdropOpacity(opacity: number): void;
|
|
223
|
-
/**
|
|
224
|
-
* Runtime visual setter for `backdrop-filter`. `undefined` clears the
|
|
225
|
-
* filter (mirrors the close() behaviour). Defers to next open() when the
|
|
226
|
-
* overlay is currently closed.
|
|
227
|
-
*/
|
|
228
123
|
setBackdropFilter(filter: string | undefined): void;
|
|
229
|
-
/**
|
|
230
|
-
* Toggle / reconfigure swipe-to-close at runtime. Re-resolves the flat
|
|
231
|
-
* threshold fields, then installs or tears down the pointer listener so
|
|
232
|
-
* the change applies to the CURRENT open cycle. Idempotent: safe to call
|
|
233
|
-
* with the same config repeatedly.
|
|
234
|
-
*/
|
|
235
124
|
setSwipeToClose(config: boolean | SwipeToCloseConfig): void;
|
|
236
|
-
/** Animation setters only stage the field — applied on next open/close. */
|
|
237
125
|
setEnterAnimation(animation: OverlayAnimation): void;
|
|
238
126
|
setExitAnimation(animation: OverlayAnimation): void;
|
|
239
|
-
/** Updates the field used at next close() — no immediate side effect. */
|
|
240
127
|
setReturnFocus(target: HTMLElement | (() => HTMLElement | null) | undefined): void;
|
|
241
|
-
/**
|
|
242
|
-
* Batch update — preset first, then individual overrides. Applied as a
|
|
243
|
-
* single DOM-write phase when open so live-controls don't trigger
|
|
244
|
-
* cascading reflows. Safe to call when closed (defers to next open).
|
|
245
|
-
*/
|
|
246
128
|
setOverlay(opts: OverlayUpdate): void;
|
|
247
|
-
/**
|
|
248
|
-
* Runtime children injection — replace the panel's contents without
|
|
249
|
-
* unmounting the engine. `replaceChildren()` is a single atomic DOM op,
|
|
250
|
-
* so callers can swap content rapidly without intermediate flicker.
|
|
251
|
-
* Function form is resolved exactly ONCE per call (cheap lazy content).
|
|
252
|
-
*/
|
|
253
129
|
setOverlayChildren(children: HTMLElement | DocumentFragment | (() => HTMLElement | DocumentFragment)): void;
|
|
254
|
-
/**
|
|
255
|
-
* Clear injected children. No-op when nothing was injected so consumers
|
|
256
|
-
* who never used setOverlayChildren can call this defensively without
|
|
257
|
-
* paying for a DOM mutation.
|
|
258
|
-
*/
|
|
259
130
|
clearOverlayChildren(): void;
|
|
260
131
|
private assignSwipeFromConfig;
|
|
261
132
|
private emit;
|
|
@@ -266,13 +137,6 @@ declare class OverlayEngine {
|
|
|
266
137
|
private awaitTransition;
|
|
267
138
|
private installInteractiveListeners;
|
|
268
139
|
private releaseInteractiveListeners;
|
|
269
|
-
/**
|
|
270
|
-
* Light pointer-driven dismiss. Tracks finger along the edge axis, follows
|
|
271
|
-
* with translate, dismisses if past `swipeThreshold` (fraction of panel
|
|
272
|
-
* size) or release velocity exceeds `swipeVelocityThreshold` (px/ms).
|
|
273
|
-
* Pure CSS-transform during drag — no rAF or physics required since the
|
|
274
|
-
* panel only moves one direction.
|
|
275
|
-
*/
|
|
276
140
|
private installSwipeToClose;
|
|
277
141
|
private registerInStack;
|
|
278
142
|
}
|