bits-ui 2.18.0 → 2.18.1
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.
|
@@ -909,7 +909,7 @@ export class MenuContentState {
|
|
|
909
909
|
if (this.#isPointerMovingToSubmenu() || this.parentMenu.root.isUsingKeyboard.current)
|
|
910
910
|
return;
|
|
911
911
|
const contentNode = this.parentMenu.contentNode;
|
|
912
|
-
contentNode?.focus();
|
|
912
|
+
contentNode?.focus({ preventScroll: true });
|
|
913
913
|
this.rovingFocusGroup.setCurrentTabStopId("");
|
|
914
914
|
}
|
|
915
915
|
onTriggerLeave() {
|
|
@@ -993,7 +993,7 @@ class MenuItemSharedState {
|
|
|
993
993
|
const item = e.currentTarget;
|
|
994
994
|
if (!isHTMLElement(item))
|
|
995
995
|
return;
|
|
996
|
-
item.focus();
|
|
996
|
+
item.focus({ preventScroll: true });
|
|
997
997
|
}
|
|
998
998
|
}
|
|
999
999
|
onpointerleave(e) {
|
|
@@ -74,15 +74,20 @@
|
|
|
74
74
|
contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
|
|
75
75
|
>
|
|
76
76
|
{#snippet popper({ props, wrapperProps })}
|
|
77
|
+
{@const finalWrapperProps = mergeProps(wrapperProps, {
|
|
78
|
+
style: {
|
|
79
|
+
pointerEvents: contentState.root.disableHoverableContent ? "none" : undefined,
|
|
80
|
+
},
|
|
81
|
+
})}
|
|
77
82
|
{@const finalProps = mergeProps(
|
|
78
83
|
props,
|
|
79
84
|
{ style: getFloatingContentCSSVars("tooltip") },
|
|
80
85
|
{ style }
|
|
81
86
|
)}
|
|
82
87
|
{#if child}
|
|
83
|
-
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
|
88
|
+
{@render child({ props: finalProps, wrapperProps: finalWrapperProps, ...contentState.snippetProps })}
|
|
84
89
|
{:else}
|
|
85
|
-
<div {...
|
|
90
|
+
<div {...finalWrapperProps}>
|
|
86
91
|
<div {...finalProps}>
|
|
87
92
|
{@render children?.()}
|
|
88
93
|
</div>
|
|
@@ -106,15 +111,20 @@
|
|
|
106
111
|
contentPointerEvents={contentState.root.disableHoverableContent ? "none" : "auto"}
|
|
107
112
|
>
|
|
108
113
|
{#snippet popper({ props, wrapperProps })}
|
|
114
|
+
{@const finalWrapperProps = mergeProps(wrapperProps, {
|
|
115
|
+
style: {
|
|
116
|
+
pointerEvents: contentState.root.disableHoverableContent ? "none" : undefined,
|
|
117
|
+
},
|
|
118
|
+
})}
|
|
109
119
|
{@const finalProps = mergeProps(
|
|
110
120
|
props,
|
|
111
121
|
{ style: getFloatingContentCSSVars("tooltip") },
|
|
112
122
|
{ style }
|
|
113
123
|
)}
|
|
114
124
|
{#if child}
|
|
115
|
-
{@render child({ props: finalProps, wrapperProps, ...contentState.snippetProps })}
|
|
125
|
+
{@render child({ props: finalProps, wrapperProps: finalWrapperProps, ...contentState.snippetProps })}
|
|
116
126
|
{:else}
|
|
117
|
-
<div {...
|
|
127
|
+
<div {...finalWrapperProps}>
|
|
118
128
|
<div {...finalProps}>
|
|
119
129
|
{@render children?.()}
|
|
120
130
|
</div>
|
|
@@ -3,6 +3,7 @@ import { watch } from "runed";
|
|
|
3
3
|
import { on } from "svelte/events";
|
|
4
4
|
import { noop } from "../../../internal/noop.js";
|
|
5
5
|
import { isHTMLElement } from "../../../internal/is.js";
|
|
6
|
+
const noopPointer = () => { };
|
|
6
7
|
globalThis.bitsTextSelectionLayers ??= new Map();
|
|
7
8
|
export class TextSelectionLayerState {
|
|
8
9
|
static create(opts) {
|
|
@@ -11,17 +12,28 @@ export class TextSelectionLayerState {
|
|
|
11
12
|
opts;
|
|
12
13
|
domContext;
|
|
13
14
|
#unsubSelectionLock = noop;
|
|
15
|
+
#enabledSnapshot = false;
|
|
16
|
+
#onPointerDownSnapshot = noopPointer;
|
|
17
|
+
#onPointerUpSnapshot = noopPointer;
|
|
14
18
|
constructor(opts) {
|
|
15
19
|
this.opts = opts;
|
|
16
20
|
this.domContext = new DOMContext(opts.ref);
|
|
17
21
|
let unsubEvents = noop;
|
|
18
|
-
watch(() =>
|
|
19
|
-
|
|
22
|
+
watch(() => [
|
|
23
|
+
this.opts.enabled.current,
|
|
24
|
+
this.opts.onPointerDown.current,
|
|
25
|
+
this.opts.onPointerUp.current,
|
|
26
|
+
], ([enabled, onPointerDown, onPointerUp]) => {
|
|
27
|
+
this.#enabledSnapshot = enabled;
|
|
28
|
+
this.#onPointerDownSnapshot = onPointerDown;
|
|
29
|
+
this.#onPointerUpSnapshot = onPointerUp;
|
|
30
|
+
if (enabled) {
|
|
20
31
|
globalThis.bitsTextSelectionLayers.set(this, this.opts.enabled);
|
|
21
32
|
unsubEvents();
|
|
22
33
|
unsubEvents = this.#addEventListeners();
|
|
23
34
|
}
|
|
24
35
|
return () => {
|
|
36
|
+
this.#enabledSnapshot = false;
|
|
25
37
|
unsubEvents();
|
|
26
38
|
this.#resetSelectionLock();
|
|
27
39
|
globalThis.bitsTextSelectionLayers.delete(this);
|
|
@@ -29,12 +41,15 @@ export class TextSelectionLayerState {
|
|
|
29
41
|
});
|
|
30
42
|
}
|
|
31
43
|
#addEventListeners() {
|
|
32
|
-
return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.#pointerdown), on(this.domContext.getDocument(), "pointerup", composeHandlers(this.#resetSelectionLock, this
|
|
44
|
+
return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.#pointerdown), on(this.domContext.getDocument(), "pointerup", composeHandlers(this.#resetSelectionLock, this.#pointerupUserHandler)));
|
|
33
45
|
}
|
|
46
|
+
#pointerupUserHandler = (e) => {
|
|
47
|
+
this.#onPointerUpSnapshot(e);
|
|
48
|
+
};
|
|
34
49
|
#pointerdown = (e) => {
|
|
35
50
|
const node = this.opts.ref.current;
|
|
36
51
|
const target = e.target;
|
|
37
|
-
if (!isHTMLElement(node) || !isHTMLElement(target) || !this
|
|
52
|
+
if (!isHTMLElement(node) || !isHTMLElement(target) || !this.#enabledSnapshot)
|
|
38
53
|
return;
|
|
39
54
|
/**
|
|
40
55
|
* We only lock user-selection overflow if layer is the top most layer and
|
|
@@ -43,7 +58,7 @@ export class TextSelectionLayerState {
|
|
|
43
58
|
*/
|
|
44
59
|
if (!isHighestLayer(this) || !contains(node, target))
|
|
45
60
|
return;
|
|
46
|
-
this
|
|
61
|
+
this.#onPointerDownSnapshot(e);
|
|
47
62
|
if (e.defaultPrevented)
|
|
48
63
|
return;
|
|
49
64
|
this.#unsubSelectionLock = preventTextSelectionOverflow(node, this.domContext.getDocument().body);
|