@radix-ui/react-dismissable-layer 1.0.6-rc.6 → 1.1.0-rc.2
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/dist/index.d.mts +13 -12
- package/dist/index.d.ts +13 -12
- package/dist/index.js +223 -270
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +199 -261
- package/dist/index.mjs.map +7 -1
- package/package.json +6 -7
- package/dist/index.d.ts.map +0 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import * as Radix from
|
|
3
|
-
import { Primitive } from
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as Radix from '@radix-ui/react-primitive';
|
|
3
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
4
|
+
|
|
5
|
+
declare type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
|
|
6
|
+
interface DismissableLayerProps extends PrimitiveDivProps {
|
|
6
7
|
/**
|
|
7
8
|
* When `true`, hover/focus/click interactions will be disabled on elements outside
|
|
8
9
|
* the `DismissableLayer`. Users will need to click twice on outside elements to
|
|
@@ -35,17 +36,17 @@ export interface DismissableLayerProps extends PrimitiveDivProps {
|
|
|
35
36
|
*/
|
|
36
37
|
onDismiss?: () => void;
|
|
37
38
|
}
|
|
38
|
-
|
|
39
|
+
declare const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
|
|
39
40
|
interface DismissableLayerBranchProps extends PrimitiveDivProps {
|
|
40
41
|
}
|
|
41
|
-
|
|
42
|
-
type PointerDownOutsideEvent = CustomEvent<{
|
|
42
|
+
declare const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
declare type PointerDownOutsideEvent = CustomEvent<{
|
|
43
44
|
originalEvent: PointerEvent;
|
|
44
45
|
}>;
|
|
45
|
-
type FocusOutsideEvent = CustomEvent<{
|
|
46
|
+
declare type FocusOutsideEvent = CustomEvent<{
|
|
46
47
|
originalEvent: FocusEvent;
|
|
47
48
|
}>;
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
declare const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
declare const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
|
|
50
51
|
|
|
51
|
-
|
|
52
|
+
export { Branch, DismissableLayer, DismissableLayerBranch, type DismissableLayerProps, Root };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
import * as Radix from
|
|
3
|
-
import { Primitive } from
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as Radix from '@radix-ui/react-primitive';
|
|
3
|
+
import { Primitive } from '@radix-ui/react-primitive';
|
|
4
|
+
|
|
5
|
+
declare type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
|
|
6
|
+
interface DismissableLayerProps extends PrimitiveDivProps {
|
|
6
7
|
/**
|
|
7
8
|
* When `true`, hover/focus/click interactions will be disabled on elements outside
|
|
8
9
|
* the `DismissableLayer`. Users will need to click twice on outside elements to
|
|
@@ -35,17 +36,17 @@ export interface DismissableLayerProps extends PrimitiveDivProps {
|
|
|
35
36
|
*/
|
|
36
37
|
onDismiss?: () => void;
|
|
37
38
|
}
|
|
38
|
-
|
|
39
|
+
declare const DismissableLayer: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
|
|
39
40
|
interface DismissableLayerBranchProps extends PrimitiveDivProps {
|
|
40
41
|
}
|
|
41
|
-
|
|
42
|
-
type PointerDownOutsideEvent = CustomEvent<{
|
|
42
|
+
declare const DismissableLayerBranch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
declare type PointerDownOutsideEvent = CustomEvent<{
|
|
43
44
|
originalEvent: PointerEvent;
|
|
44
45
|
}>;
|
|
45
|
-
type FocusOutsideEvent = CustomEvent<{
|
|
46
|
+
declare type FocusOutsideEvent = CustomEvent<{
|
|
46
47
|
originalEvent: FocusEvent;
|
|
47
48
|
}>;
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
declare const Root: React.ForwardRefExoticComponent<DismissableLayerProps & React.RefAttributes<HTMLDivElement>>;
|
|
50
|
+
declare const Branch: React.ForwardRefExoticComponent<DismissableLayerBranchProps & React.RefAttributes<HTMLDivElement>>;
|
|
50
51
|
|
|
51
|
-
|
|
52
|
+
export { Branch, DismissableLayer, DismissableLayerBranch, type DismissableLayerProps, Root };
|
package/dist/index.js
CHANGED
|
@@ -1,293 +1,246 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
(() => {
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
11
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
12
|
+
}) : x)(function(x) {
|
|
13
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
14
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
15
|
+
});
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from))
|
|
19
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
20
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
30
|
+
mod
|
|
31
|
+
));
|
|
8
32
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
...context.layersWithOutsidePointerEventsDisabled
|
|
51
|
-
].slice(-1); // prettier-ignore
|
|
52
|
-
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore
|
|
53
|
-
const index = node1 ? layers.indexOf(node1) : -1;
|
|
54
|
-
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
55
|
-
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
56
|
-
const pointerDownOutside = $d715e0554b679f1f$var$usePointerDownOutside((event)=>{
|
|
33
|
+
// packages/react/dismissable-layer/src/DismissableLayer.tsx
|
|
34
|
+
var React = __toESM(__require("react"));
|
|
35
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
36
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
37
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
38
|
+
var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
|
|
39
|
+
var import_react_use_escape_keydown = __require("@radix-ui/react-use-escape-keydown");
|
|
40
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
41
|
+
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
|
|
42
|
+
var CONTEXT_UPDATE = "dismissableLayer.update";
|
|
43
|
+
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
|
|
44
|
+
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
|
|
45
|
+
var originalBodyPointerEvents;
|
|
46
|
+
var DismissableLayerContext = React.createContext({
|
|
47
|
+
layers: /* @__PURE__ */ new Set(),
|
|
48
|
+
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
49
|
+
branches: /* @__PURE__ */ new Set()
|
|
50
|
+
});
|
|
51
|
+
var DismissableLayer = React.forwardRef(
|
|
52
|
+
(props, forwardedRef) => {
|
|
53
|
+
const {
|
|
54
|
+
disableOutsidePointerEvents = false,
|
|
55
|
+
onEscapeKeyDown,
|
|
56
|
+
onPointerDownOutside,
|
|
57
|
+
onFocusOutside,
|
|
58
|
+
onInteractOutside,
|
|
59
|
+
onDismiss,
|
|
60
|
+
...layerProps
|
|
61
|
+
} = props;
|
|
62
|
+
const context = React.useContext(DismissableLayerContext);
|
|
63
|
+
const [node, setNode] = React.useState(null);
|
|
64
|
+
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
|
|
65
|
+
const [, force] = React.useState({});
|
|
66
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node2) => setNode(node2));
|
|
67
|
+
const layers = Array.from(context.layers);
|
|
68
|
+
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
|
|
69
|
+
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
|
|
70
|
+
const index = node ? layers.indexOf(node) : -1;
|
|
71
|
+
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
72
|
+
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
73
|
+
const pointerDownOutside = usePointerDownOutside((event) => {
|
|
57
74
|
const target = event.target;
|
|
58
|
-
const isPointerDownOnBranch = [
|
|
59
|
-
...context.branches
|
|
60
|
-
].some((branch)=>branch.contains(target)
|
|
61
|
-
);
|
|
75
|
+
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
62
76
|
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
|
|
63
|
-
onPointerDownOutside
|
|
64
|
-
onInteractOutside
|
|
65
|
-
if (!event.defaultPrevented) onDismiss
|
|
66
|
-
|
|
67
|
-
|
|
77
|
+
onPointerDownOutside?.(event);
|
|
78
|
+
onInteractOutside?.(event);
|
|
79
|
+
if (!event.defaultPrevented) onDismiss?.();
|
|
80
|
+
}, ownerDocument);
|
|
81
|
+
const focusOutside = useFocusOutside((event) => {
|
|
68
82
|
const target = event.target;
|
|
69
|
-
const isFocusInBranch = [
|
|
70
|
-
...context.branches
|
|
71
|
-
].some((branch)=>branch.contains(target)
|
|
72
|
-
);
|
|
83
|
+
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
73
84
|
if (isFocusInBranch) return;
|
|
74
|
-
onFocusOutside
|
|
75
|
-
onInteractOutside
|
|
76
|
-
if (!event.defaultPrevented) onDismiss
|
|
77
|
-
|
|
78
|
-
|
|
85
|
+
onFocusOutside?.(event);
|
|
86
|
+
onInteractOutside?.(event);
|
|
87
|
+
if (!event.defaultPrevented) onDismiss?.();
|
|
88
|
+
}, ownerDocument);
|
|
89
|
+
(0, import_react_use_escape_keydown.useEscapeKeydown)((event) => {
|
|
79
90
|
const isHighestLayer = index === context.layers.size - 1;
|
|
80
91
|
if (!isHighestLayer) return;
|
|
81
|
-
onEscapeKeyDown
|
|
92
|
+
onEscapeKeyDown?.(event);
|
|
82
93
|
if (!event.defaultPrevented && onDismiss) {
|
|
83
|
-
|
|
84
|
-
|
|
94
|
+
event.preventDefault();
|
|
95
|
+
onDismiss();
|
|
85
96
|
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
if (!
|
|
97
|
+
}, ownerDocument);
|
|
98
|
+
React.useEffect(() => {
|
|
99
|
+
if (!node) return;
|
|
89
100
|
if (disableOutsidePointerEvents) {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
101
|
+
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
102
|
+
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
|
|
103
|
+
ownerDocument.body.style.pointerEvents = "none";
|
|
104
|
+
}
|
|
105
|
+
context.layersWithOutsidePointerEventsDisabled.add(node);
|
|
95
106
|
}
|
|
96
|
-
context.layers.add(
|
|
97
|
-
|
|
98
|
-
return ()=>{
|
|
99
|
-
|
|
107
|
+
context.layers.add(node);
|
|
108
|
+
dispatchUpdate();
|
|
109
|
+
return () => {
|
|
110
|
+
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
|
|
111
|
+
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
|
|
112
|
+
}
|
|
100
113
|
};
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
* We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
|
|
109
|
-
* because a change to `disableOutsidePointerEvents` would remove this layer from the stack
|
|
110
|
-
* and add it to the end again so the layering order wouldn't be _creation order_.
|
|
111
|
-
* We only want them to be removed from context stacks when unmounted.
|
|
112
|
-
*/ $g2vWm$react.useEffect(()=>{
|
|
113
|
-
return ()=>{
|
|
114
|
-
if (!node1) return;
|
|
115
|
-
context.layers.delete(node1);
|
|
116
|
-
context.layersWithOutsidePointerEventsDisabled.delete(node1);
|
|
117
|
-
$d715e0554b679f1f$var$dispatchUpdate();
|
|
114
|
+
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
|
|
115
|
+
React.useEffect(() => {
|
|
116
|
+
return () => {
|
|
117
|
+
if (!node) return;
|
|
118
|
+
context.layers.delete(node);
|
|
119
|
+
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
120
|
+
dispatchUpdate();
|
|
118
121
|
};
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
style: {
|
|
133
|
-
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined,
|
|
122
|
+
}, [node, context]);
|
|
123
|
+
React.useEffect(() => {
|
|
124
|
+
const handleUpdate = () => force({});
|
|
125
|
+
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
126
|
+
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
127
|
+
}, []);
|
|
128
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
129
|
+
import_react_primitive.Primitive.div,
|
|
130
|
+
{
|
|
131
|
+
...layerProps,
|
|
132
|
+
ref: composedRefs,
|
|
133
|
+
style: {
|
|
134
|
+
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
134
135
|
...props.style
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
displayName: $d715e0554b679f1f$var$DISMISSABLE_LAYER_NAME
|
|
143
|
-
});
|
|
144
|
-
/* -------------------------------------------------------------------------------------------------
|
|
145
|
-
* DismissableLayerBranch
|
|
146
|
-
* -----------------------------------------------------------------------------------------------*/ const $d715e0554b679f1f$var$BRANCH_NAME = 'DismissableLayerBranch';
|
|
147
|
-
const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.forwardRef((props, forwardedRef)=>{
|
|
148
|
-
const context = $g2vWm$react.useContext($d715e0554b679f1f$var$DismissableLayerContext);
|
|
149
|
-
const ref = $g2vWm$react.useRef(null);
|
|
150
|
-
const composedRefs = $g2vWm$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
|
|
151
|
-
$g2vWm$react.useEffect(()=>{
|
|
152
|
-
const node = ref.current;
|
|
153
|
-
if (node) {
|
|
154
|
-
context.branches.add(node);
|
|
155
|
-
return ()=>{
|
|
156
|
-
context.branches.delete(node);
|
|
157
|
-
};
|
|
136
|
+
},
|
|
137
|
+
onFocusCapture: (0, import_primitive.composeEventHandlers)(props.onFocusCapture, focusOutside.onFocusCapture),
|
|
138
|
+
onBlurCapture: (0, import_primitive.composeEventHandlers)(props.onBlurCapture, focusOutside.onBlurCapture),
|
|
139
|
+
onPointerDownCapture: (0, import_primitive.composeEventHandlers)(
|
|
140
|
+
props.onPointerDownCapture,
|
|
141
|
+
pointerDownOutside.onPointerDownCapture
|
|
142
|
+
)
|
|
158
143
|
}
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
const handlePointerDownOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onPointerDownOutside);
|
|
175
|
-
const isPointerInsideReactTreeRef = $g2vWm$react.useRef(false);
|
|
176
|
-
const handleClickRef = $g2vWm$react.useRef(()=>{});
|
|
177
|
-
$g2vWm$react.useEffect(()=>{
|
|
178
|
-
const handlePointerDown = (event)=>{
|
|
179
|
-
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
180
|
-
const eventDetail = {
|
|
181
|
-
originalEvent: event
|
|
182
|
-
};
|
|
183
|
-
function handleAndDispatchPointerDownOutsideEvent() {
|
|
184
|
-
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
|
|
185
|
-
discrete: true
|
|
186
|
-
});
|
|
187
|
-
}
|
|
188
|
-
/**
|
|
189
|
-
* On touch devices, we need to wait for a click event because browsers implement
|
|
190
|
-
* a ~350ms delay between the time the user stops touching the display and when the
|
|
191
|
-
* browser executres events. We need to ensure we don't reactivate pointer-events within
|
|
192
|
-
* this timeframe otherwise the browser may execute events that should have been prevented.
|
|
193
|
-
*
|
|
194
|
-
* Additionally, this also lets us deal automatically with cancellations when a click event
|
|
195
|
-
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
|
|
196
|
-
*
|
|
197
|
-
* This is why we also continuously remove the previous listener, because we cannot be
|
|
198
|
-
* certain that it was raised, and therefore cleaned-up.
|
|
199
|
-
*/ if (event.pointerType === 'touch') {
|
|
200
|
-
ownerDocument.removeEventListener('click', handleClickRef.current);
|
|
201
|
-
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
|
|
202
|
-
ownerDocument.addEventListener('click', handleClickRef.current, {
|
|
203
|
-
once: true
|
|
204
|
-
});
|
|
205
|
-
} else handleAndDispatchPointerDownOutsideEvent();
|
|
206
|
-
} else // We need to remove the event listener in case the outside click has been canceled.
|
|
207
|
-
// See: https://github.com/radix-ui/primitives/issues/2171
|
|
208
|
-
ownerDocument.removeEventListener('click', handleClickRef.current);
|
|
209
|
-
isPointerInsideReactTreeRef.current = false;
|
|
144
|
+
);
|
|
145
|
+
}
|
|
146
|
+
);
|
|
147
|
+
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
|
|
148
|
+
var BRANCH_NAME = "DismissableLayerBranch";
|
|
149
|
+
var DismissableLayerBranch = React.forwardRef((props, forwardedRef) => {
|
|
150
|
+
const context = React.useContext(DismissableLayerContext);
|
|
151
|
+
const ref = React.useRef(null);
|
|
152
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
|
|
153
|
+
React.useEffect(() => {
|
|
154
|
+
const node = ref.current;
|
|
155
|
+
if (node) {
|
|
156
|
+
context.branches.add(node);
|
|
157
|
+
return () => {
|
|
158
|
+
context.branches.delete(node);
|
|
210
159
|
};
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
160
|
+
}
|
|
161
|
+
}, [context.branches]);
|
|
162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...props, ref: composedRefs });
|
|
163
|
+
});
|
|
164
|
+
DismissableLayerBranch.displayName = BRANCH_NAME;
|
|
165
|
+
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
|
|
166
|
+
const handlePointerDownOutside = (0, import_react_use_callback_ref.useCallbackRef)(onPointerDownOutside);
|
|
167
|
+
const isPointerInsideReactTreeRef = React.useRef(false);
|
|
168
|
+
const handleClickRef = React.useRef(() => {
|
|
169
|
+
});
|
|
170
|
+
React.useEffect(() => {
|
|
171
|
+
const handlePointerDown = (event) => {
|
|
172
|
+
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
173
|
+
let handleAndDispatchPointerDownOutsideEvent2 = function() {
|
|
174
|
+
handleAndDispatchCustomEvent(
|
|
175
|
+
POINTER_DOWN_OUTSIDE,
|
|
176
|
+
handlePointerDownOutside,
|
|
177
|
+
eventDetail,
|
|
178
|
+
{ discrete: true }
|
|
179
|
+
);
|
|
180
|
+
};
|
|
181
|
+
var handleAndDispatchPointerDownOutsideEvent = handleAndDispatchPointerDownOutsideEvent2;
|
|
182
|
+
const eventDetail = { originalEvent: event };
|
|
183
|
+
if (event.pointerType === "touch") {
|
|
184
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
185
|
+
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
|
|
186
|
+
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
|
|
187
|
+
} else {
|
|
188
|
+
handleAndDispatchPointerDownOutsideEvent2();
|
|
189
|
+
}
|
|
190
|
+
} else {
|
|
191
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
192
|
+
}
|
|
193
|
+
isPointerInsideReactTreeRef.current = false;
|
|
194
|
+
};
|
|
195
|
+
const timerId = window.setTimeout(() => {
|
|
196
|
+
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
197
|
+
}, 0);
|
|
198
|
+
return () => {
|
|
199
|
+
window.clearTimeout(timerId);
|
|
200
|
+
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
201
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
202
|
+
};
|
|
203
|
+
}, [ownerDocument, handlePointerDownOutside]);
|
|
235
204
|
return {
|
|
236
|
-
|
|
237
|
-
|
|
205
|
+
// ensures we check React component tree (not just DOM tree)
|
|
206
|
+
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
238
207
|
};
|
|
239
|
-
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
}
|
|
256
|
-
};
|
|
257
|
-
ownerDocument.addEventListener('focusin', handleFocus);
|
|
258
|
-
return ()=>ownerDocument.removeEventListener('focusin', handleFocus)
|
|
259
|
-
;
|
|
260
|
-
}, [
|
|
261
|
-
ownerDocument,
|
|
262
|
-
handleFocusOutside
|
|
263
|
-
]);
|
|
208
|
+
}
|
|
209
|
+
function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
|
|
210
|
+
const handleFocusOutside = (0, import_react_use_callback_ref.useCallbackRef)(onFocusOutside);
|
|
211
|
+
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
212
|
+
React.useEffect(() => {
|
|
213
|
+
const handleFocus = (event) => {
|
|
214
|
+
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
215
|
+
const eventDetail = { originalEvent: event };
|
|
216
|
+
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
217
|
+
discrete: false
|
|
218
|
+
});
|
|
219
|
+
}
|
|
220
|
+
};
|
|
221
|
+
ownerDocument.addEventListener("focusin", handleFocus);
|
|
222
|
+
return () => ownerDocument.removeEventListener("focusin", handleFocus);
|
|
223
|
+
}, [ownerDocument, handleFocusOutside]);
|
|
264
224
|
return {
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false
|
|
225
|
+
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
|
|
226
|
+
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
268
227
|
};
|
|
269
|
-
}
|
|
270
|
-
function
|
|
271
|
-
const event = new CustomEvent(
|
|
228
|
+
}
|
|
229
|
+
function dispatchUpdate() {
|
|
230
|
+
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
272
231
|
document.dispatchEvent(event);
|
|
273
|
-
}
|
|
274
|
-
function
|
|
232
|
+
}
|
|
233
|
+
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
275
234
|
const target = detail.originalEvent.target;
|
|
276
|
-
const event = new CustomEvent(name, {
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
}
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
}
|
|
287
|
-
const $d715e0554b679f1f$export$be92b6f5f03c0fe9 = $d715e0554b679f1f$export$177fb62ff3ec1f22;
|
|
288
|
-
const $d715e0554b679f1f$export$aecb2ddcb55c95be = $d715e0554b679f1f$export$4d5eb2109db14228;
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
235
|
+
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
236
|
+
if (handler) target.addEventListener(name, handler, { once: true });
|
|
237
|
+
if (discrete) {
|
|
238
|
+
(0, import_react_primitive.dispatchDiscreteCustomEvent)(target, event);
|
|
239
|
+
} else {
|
|
240
|
+
target.dispatchEvent(event);
|
|
241
|
+
}
|
|
242
|
+
}
|
|
243
|
+
var Root = DismissableLayer;
|
|
244
|
+
var Branch = DismissableLayerBranch;
|
|
245
|
+
})();
|
|
293
246
|
//# sourceMappingURL=index.js.map
|