@@ -15,11 +15,12 @@ import {
15
15
isRootElement ,
16
16
} from "../internal/dom.js" ;
17
17
import type { FloatingContext } from "./use-floating.svelte.js" ;
18
- import type { FloatingTreeType } from "../types.js" ;
18
+ import type { FloatingTreeType , MaybeGetter } from "../types.js" ;
19
19
import { useFloatingTree } from "../components/floating-tree/hooks.svelte.js" ;
20
20
import { getChildren } from "../internal/get-children.js" ;
21
21
import { on } from "svelte/events" ;
22
22
import { executeCallbacks } from "../internal/execute-callbacks.js" ;
23
+ import { extract } from "../internal/extract.js" ;
23
24
24
25
const bubbleHandlerKeys = {
25
26
pointerdown : "onpointerdown" ,
@@ -54,27 +55,27 @@ interface UseDismissOptions {
54
55
* handlers.
55
56
* @default true
56
57
*/
57
- enabled ?: boolean ;
58
+ enabled ?: MaybeGetter < boolean > ;
58
59
/**
59
60
* Whether to dismiss the floating element upon pressing the `esc` key.
60
61
* @default true
61
62
*/
62
- escapeKey ?: boolean ;
63
+ escapeKey ?: MaybeGetter < boolean > ;
63
64
/**
64
65
* Whether to dismiss the floating element upon pressing the reference
65
66
* element. You likely want to ensure the `move` option in the `useHover()`
66
67
* Hook has been disabled when this is in use.
67
68
* @default false
68
69
*/
69
- referencePress ?: boolean ;
70
+ referencePress ?: MaybeGetter < boolean > ;
70
71
/**
71
72
* The type of event to use to determine a “press”.
72
73
* - `pointerdown` is eager on both mouse + touch input.
73
74
* - `mousedown` is eager on mouse input, but lazy on touch input.
74
75
* - `click` is lazy on both mouse + touch input.
75
76
* @default 'pointerdown'
76
77
*/
77
- referencePressEvent ?: "pointerdown" | "mousedown" | "click" ;
78
+ referencePressEvent ?: MaybeGetter < "pointerdown" | "mousedown" | "click" > ;
78
79
/**
79
80
* Whether to dismiss the floating element upon pressing outside of the
80
81
* floating element.
@@ -96,38 +97,46 @@ interface UseDismissOptions {
96
97
* - `click` is lazy on both mouse + touch input.
97
98
* @default 'pointerdown'
98
99
*/
99
- outsidePressEvent ?: "pointerdown" | "mousedown" | "click" ;
100
+ outsidePressEvent ?: MaybeGetter < "pointerdown" | "mousedown" | "click" > ;
100
101
/**
101
102
* Whether to dismiss the floating element upon scrolling an overflow
102
103
* ancestor.
103
104
* @default false
104
105
*/
105
- ancestorScroll ?: boolean ;
106
+ ancestorScroll ?: MaybeGetter < boolean > ;
106
107
/**
107
108
* Determines whether event listeners bubble upwards through a tree of
108
109
* floating elements.
109
110
*/
110
- bubbles ?: boolean | { escapeKey ?: boolean ; outsidePress ?: boolean } ;
111
+ bubbles ?: MaybeGetter <
112
+ boolean | { escapeKey ?: boolean ; outsidePress ?: boolean }
113
+ > ;
111
114
/**
112
115
* Determines whether to use capture phase event listeners.
113
116
*/
114
- capture ?: boolean | { escapeKey ?: boolean ; outsidePress ?: boolean } ;
117
+ capture ?: MaybeGetter <
118
+ boolean | { escapeKey ?: boolean ; outsidePress ?: boolean }
119
+ > ;
115
120
}
116
121
117
122
class DismissInteraction {
118
- #enabled = $derived . by ( ( ) => this . options . enabled ?? true ) ;
119
- #escapeKey = $derived . by ( ( ) => this . options . escapeKey ?? true ) ;
123
+ #enabled = $derived . by ( ( ) => extract ( this . options . enabled , true ) ) ;
124
+ #escapeKey = $derived . by ( ( ) => extract ( this . options . escapeKey , true ) ) ;
120
125
#unstable_outsidePress = $derived . by ( ( ) => this . options . outsidePress ?? true ) ;
121
- #outsidePressEvent = $derived . by (
122
- ( ) => this . options . outsidePressEvent ?? "pointerdown" ,
126
+ #outsidePressEvent = $derived . by ( ( ) =>
127
+ extract ( this . options . outsidePressEvent , "pointerdown" ) ,
123
128
) ;
124
- #referencePress = $derived . by ( ( ) => this . options . referencePress ?? false ) ;
125
- #referencePressEvent = $derived . by (
126
- ( ) => this . options . referencePressEvent ?? "pointerdown" ,
129
+ #referencePress = $derived . by ( ( ) =>
130
+ extract ( this . options . referencePress , false ) ,
127
131
) ;
128
- #ancestorScroll = $derived . by ( ( ) => this . options . ancestorScroll ?? false ) ;
129
- #bubbles = $derived . by ( ( ) => this . options . bubbles ) ;
130
- #capture = $derived . by ( ( ) => this . options . capture ) ;
132
+ #referencePressEvent = $derived . by ( ( ) =>
133
+ extract ( this . options . referencePressEvent , "pointerdown" ) ,
134
+ ) ;
135
+ #ancestorScroll = $derived . by ( ( ) =>
136
+ extract ( this . options . ancestorScroll , false ) ,
137
+ ) ;
138
+ #bubbles = $derived . by ( ( ) => extract ( this . options . bubbles ) ) ;
139
+ #capture = $derived . by ( ( ) => extract ( this . options . capture ) ) ;
131
140
132
141
#outsidePressFn = $derived . by ( ( ) =>
133
142
typeof this . #unstable_outsidePress === "function"
@@ -184,7 +193,7 @@ class DismissInteraction {
184
193
) ;
185
194
} ;
186
195
187
- const doc = getDocument ( this . context . elements . floating ) ;
196
+ const doc = getDocument ( this . context . floating ) ;
188
197
189
198
const listenersToRemove : Array < ( ) => void > = [ ] ;
190
199
@@ -217,25 +226,23 @@ class DismissInteraction {
217
226
let ancestors : ( Element | Window | VisualViewport ) [ ] = [ ] ;
218
227
219
228
if ( this . #ancestorScroll) {
220
- if ( isElement ( this . context . elements . domReference ) ) {
221
- ancestors = getOverflowAncestors ( this . context . elements . domReference ) ;
229
+ if ( isElement ( this . context . domReference ) ) {
230
+ ancestors = getOverflowAncestors ( this . context . domReference ) ;
222
231
}
223
232
224
- if ( isElement ( this . context . elements . floating ) ) {
233
+ if ( isElement ( this . context . floating ) ) {
225
234
ancestors = ancestors . concat (
226
- getOverflowAncestors ( this . context . elements . floating ) ,
235
+ getOverflowAncestors ( this . context . floating ) ,
227
236
) ;
228
237
}
229
238
230
239
if (
231
- ! isElement ( this . context . elements . reference ) &&
232
- this . context . elements . reference &&
233
- this . context . elements . reference . contextElement
240
+ ! isElement ( this . context . reference ) &&
241
+ this . context . reference &&
242
+ this . context . reference . contextElement
234
243
) {
235
244
ancestors = ancestors . concat (
236
- getOverflowAncestors (
237
- this . context . elements . reference . contextElement ,
238
- ) ,
245
+ getOverflowAncestors ( this . context . reference . contextElement ) ,
239
246
) ;
240
247
}
241
248
}
@@ -335,9 +342,9 @@ class DismissInteraction {
335
342
336
343
const target = getTarget ( event ) ;
337
344
const inertSelector = `[${ createAttribute ( "inert" ) } ]` ;
338
- const markers = getDocument (
339
- this . context . elements . floating ,
340
- ) . querySelectorAll ( inertSelector ) ;
345
+ const markers = getDocument ( this . context . floating ) . querySelectorAll (
346
+ inertSelector ,
347
+ ) ;
341
348
342
349
let targetRootAncestor = isElement ( target ) ? target : null ;
343
350
@@ -355,7 +362,7 @@ class DismissInteraction {
355
362
isElement ( target ) &&
356
363
! isRootElement ( target ) &&
357
364
// Clicked on a direct ancestor (e.g. FloatingOverlay).
358
- ! contains ( target , this . context . elements . floating ) &&
365
+ ! contains ( target , this . context . floating ) &&
359
366
// If the target root element contains none of the markers, then the
360
367
// element was injected after the floating element rendered.
361
368
Array . from ( markers ) . every (
@@ -412,12 +419,12 @@ class DismissInteraction {
412
419
const targetIsInsideChildren =
413
420
children . length &&
414
421
children . some ( ( node ) =>
415
- isEventTargetWithin ( event , node . context ?. elements . floating ) ,
422
+ isEventTargetWithin ( event , node . context ?. floating ) ,
416
423
) ;
417
424
418
425
if (
419
- isEventTargetWithin ( event , this . context . elements . floating ) ||
420
- isEventTargetWithin ( event , this . context . elements . domReference ) ||
426
+ isEventTargetWithin ( event , this . context . floating ) ||
427
+ isEventTargetWithin ( event , this . context . domReference ) ||
421
428
targetIsInsideChildren
422
429
) {
423
430
return ;
0 commit comments