@radix-ui/react-dismissable-layer 0.1.6-rc.4 → 0.1.6-rc.40
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.ts.map +1 -1
- package/dist/index.js +47 -12
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +48 -13
- package/dist/index.module.js.map +1 -1
- package/package.json +8 -8
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;AA2BA,yBAAyB,MAAM,wBAAwB,CAAC,OAAO,UAAU,GAAG,CAAC,CAAC;AAC9E,sCAAgC,SAAQ,iBAAiB;IACvD;;;;OAIG;IACH,2BAA2B,CAAC,EAAE,OAAO,CAAC;IACtC;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAChE;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,GAAG,iBAAiB,KAAK,IAAI,CAAC;IACjF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,OAAA,MAAM,8GAiHL,CAAC;AAWF,qCAAsC,SAAQ,iBAAiB;CAAG;AAElE,OAAA,MAAM,0HAmBJ,CAAC;AAMH,+BAA+B,WAAW,CAAC;IAAE,aAAa,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAC5E,yBAAyB,WAAW,CAAC;IAAE,aAAa,EAAE,UAAU,CAAA;CAAE,CAAC,CAAC;AA8HpE,OAAA,MAAM,kGAAuB,CAAC;AAC9B,OAAA,MAAM,0GAA+B,CAAC","sources":["packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/DismissableLayer.tsx","packages/react/dismissable-layer/src/packages/react/dismissable-layer/src/index.ts","packages/react/dismissable-layer/src/index.ts"],"sourcesContent":[null,null,"export * from './DismissableLayer';\n"],"names":[],"version":3,"file":"index.d.ts.map"}
|
package/dist/index.js
CHANGED
|
@@ -3,7 +3,6 @@ var $g2vWm$react = require("react");
|
|
|
3
3
|
var $g2vWm$radixuiprimitive = require("@radix-ui/primitive");
|
|
4
4
|
var $g2vWm$radixuireactprimitive = require("@radix-ui/react-primitive");
|
|
5
5
|
var $g2vWm$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
|
|
6
|
-
var $g2vWm$radixuireactusebodypointerevents = require("@radix-ui/react-use-body-pointer-events");
|
|
7
6
|
var $g2vWm$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
|
|
8
7
|
var $g2vWm$radixuireactuseescapekeydown = require("@radix-ui/react-use-escape-keydown");
|
|
9
8
|
|
|
@@ -42,13 +41,13 @@ $parcel$export($d715e0554b679f1f$exports, "Branch", () => $d715e0554b679f1f$expo
|
|
|
42
41
|
|
|
43
42
|
|
|
44
43
|
|
|
45
|
-
|
|
46
44
|
/* -------------------------------------------------------------------------------------------------
|
|
47
45
|
* DismissableLayer
|
|
48
46
|
* -----------------------------------------------------------------------------------------------*/ const $d715e0554b679f1f$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer';
|
|
49
47
|
const $d715e0554b679f1f$var$CONTEXT_UPDATE = 'dismissableLayer.update';
|
|
50
48
|
const $d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
|
|
51
49
|
const $d715e0554b679f1f$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
|
|
50
|
+
let $d715e0554b679f1f$var$originalBodyPointerEvents;
|
|
52
51
|
const $d715e0554b679f1f$var$DismissableLayerContext = /*#__PURE__*/ $g2vWm$react.createContext({
|
|
53
52
|
layers: new Set(),
|
|
54
53
|
layersWithOutsidePointerEventsDisabled: new Set(),
|
|
@@ -95,16 +94,25 @@ const $d715e0554b679f1f$export$177fb62ff3ec1f22 = /*#__PURE__*/ $g2vWm$react.for
|
|
|
95
94
|
const isHighestLayer = index === context.layers.size - 1;
|
|
96
95
|
if (!isHighestLayer) return;
|
|
97
96
|
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
|
|
98
|
-
if (!event.defaultPrevented
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
97
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
98
|
+
event.preventDefault();
|
|
99
|
+
onDismiss();
|
|
100
|
+
}
|
|
102
101
|
});
|
|
103
102
|
$g2vWm$react.useEffect(()=>{
|
|
104
103
|
if (!node1) return;
|
|
105
|
-
if (disableOutsidePointerEvents)
|
|
104
|
+
if (disableOutsidePointerEvents) {
|
|
105
|
+
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
106
|
+
$d715e0554b679f1f$var$originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
107
|
+
document.body.style.pointerEvents = 'none';
|
|
108
|
+
}
|
|
109
|
+
context.layersWithOutsidePointerEventsDisabled.add(node1);
|
|
110
|
+
}
|
|
106
111
|
context.layers.add(node1);
|
|
107
112
|
$d715e0554b679f1f$var$dispatchUpdate();
|
|
113
|
+
return ()=>{
|
|
114
|
+
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) document.body.style.pointerEvents = $d715e0554b679f1f$var$originalBodyPointerEvents;
|
|
115
|
+
};
|
|
108
116
|
}, [
|
|
109
117
|
node1,
|
|
110
118
|
disableOutsidePointerEvents,
|
|
@@ -179,13 +187,36 @@ const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.for
|
|
|
179
187
|
*/ function $d715e0554b679f1f$var$usePointerDownOutside(onPointerDownOutside) {
|
|
180
188
|
const handlePointerDownOutside = $g2vWm$radixuireactusecallbackref.useCallbackRef(onPointerDownOutside);
|
|
181
189
|
const isPointerInsideReactTreeRef = $g2vWm$react.useRef(false);
|
|
190
|
+
const handleClickRef = $g2vWm$react.useRef(()=>{});
|
|
182
191
|
$g2vWm$react.useEffect(()=>{
|
|
183
192
|
const handlePointerDown = (event)=>{
|
|
184
193
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
185
194
|
const eventDetail = {
|
|
186
195
|
originalEvent: event
|
|
187
196
|
};
|
|
188
|
-
|
|
197
|
+
function handleAndDispatchPointerDownOutsideEvent() {
|
|
198
|
+
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
|
|
199
|
+
discrete: true
|
|
200
|
+
});
|
|
201
|
+
}
|
|
202
|
+
/**
|
|
203
|
+
* On touch devices, we need to wait for a click event because browsers implement
|
|
204
|
+
* a ~350ms delay between the time the user stops touching the display and when the
|
|
205
|
+
* browser executres events. We need to ensure we don't reactivate pointer-events within
|
|
206
|
+
* this timeframe otherwise the browser may execute events that should have been prevented.
|
|
207
|
+
*
|
|
208
|
+
* Additionally, this also lets us deal automatically with cancellations when a click event
|
|
209
|
+
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
|
|
210
|
+
*
|
|
211
|
+
* This is why we also continuously remove the previous listener, because we cannot be
|
|
212
|
+
* certain that it was raised, and therefore cleaned-up.
|
|
213
|
+
*/ if (event.pointerType === 'touch') {
|
|
214
|
+
document.removeEventListener('click', handleClickRef.current);
|
|
215
|
+
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
|
|
216
|
+
document.addEventListener('click', handleClickRef.current, {
|
|
217
|
+
once: true
|
|
218
|
+
});
|
|
219
|
+
} else handleAndDispatchPointerDownOutsideEvent();
|
|
189
220
|
}
|
|
190
221
|
isPointerInsideReactTreeRef.current = false;
|
|
191
222
|
};
|
|
@@ -207,6 +238,7 @@ const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.for
|
|
|
207
238
|
return ()=>{
|
|
208
239
|
window.clearTimeout(timerId);
|
|
209
240
|
document.removeEventListener('pointerdown', handlePointerDown);
|
|
241
|
+
document.removeEventListener('click', handleClickRef.current);
|
|
210
242
|
};
|
|
211
243
|
}, [
|
|
212
244
|
handlePointerDownOutside
|
|
@@ -228,7 +260,9 @@ const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.for
|
|
|
228
260
|
const eventDetail = {
|
|
229
261
|
originalEvent: event
|
|
230
262
|
};
|
|
231
|
-
$d715e0554b679f1f$var$
|
|
263
|
+
$d715e0554b679f1f$var$handleAndDispatchCustomEvent($d715e0554b679f1f$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
264
|
+
discrete: false
|
|
265
|
+
});
|
|
232
266
|
}
|
|
233
267
|
};
|
|
234
268
|
document.addEventListener('focusin', handleFocus);
|
|
@@ -244,10 +278,10 @@ const $d715e0554b679f1f$export$4d5eb2109db14228 = /*#__PURE__*/ $g2vWm$react.for
|
|
|
244
278
|
};
|
|
245
279
|
}
|
|
246
280
|
function $d715e0554b679f1f$var$dispatchUpdate() {
|
|
247
|
-
const event = new
|
|
281
|
+
const event = new CustomEvent($d715e0554b679f1f$var$CONTEXT_UPDATE);
|
|
248
282
|
document.dispatchEvent(event);
|
|
249
283
|
}
|
|
250
|
-
function $d715e0554b679f1f$var$
|
|
284
|
+
function $d715e0554b679f1f$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
|
|
251
285
|
const target = detail.originalEvent.target;
|
|
252
286
|
const event = new CustomEvent(name, {
|
|
253
287
|
bubbles: false,
|
|
@@ -257,7 +291,8 @@ function $d715e0554b679f1f$var$dispatchCustomEvent(name, handler, detail) {
|
|
|
257
291
|
if (handler) target.addEventListener(name, handler, {
|
|
258
292
|
once: true
|
|
259
293
|
});
|
|
260
|
-
|
|
294
|
+
if (discrete) $g2vWm$radixuireactprimitive.dispatchDiscreteCustomEvent(target, event);
|
|
295
|
+
else target.dispatchEvent(event);
|
|
261
296
|
}
|
|
262
297
|
const $d715e0554b679f1f$export$be92b6f5f03c0fe9 = $d715e0554b679f1f$export$177fb62ff3ec1f22;
|
|
263
298
|
const $d715e0554b679f1f$export$aecb2ddcb55c95be = $d715e0554b679f1f$export$4d5eb2109db14228;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react/dismissable-layer/src/index.ts","packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["export * from './DismissableLayer';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useBodyPointerEvents } from '@radix-ui/react-use-body-pointer-events';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set<DismissableLayerElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState<DismissableLayerElement | null>(null);\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n useBodyPointerEvents({ disabled: disableOutsidePointerEvents });\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) context.layersWithOutsidePointerEventsDisabled.add(node);\n context.layers.add(node);\n dispatchUpdate();\n }, [node, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n <Primitive.div\n {...layerProps}\n ref={composedRefs}\n style={{\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n ...props.style,\n }}\n onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n onPointerDownCapture={composeEventHandlers(\n props.onPointerDownCapture,\n pointerDownOutside.onPointerDownCapture\n )}\n />\n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef<DismissableLayerBranchElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n dispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail);\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n document.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n document.removeEventListener('pointerdown', handlePointerDown);\n };\n }, [handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n dispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail);\n }\n };\n document.addEventListener('focusin', handleFocus);\n return () => document.removeEventListener('focusin', handleFocus);\n }, [handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new Event(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction dispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never)\n) {\n const target = detail.originalEvent.target as HTMLElement;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n return !target.dispatchEvent(event);\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n"],"names":["React","composeEventHandlers","Primitive","useComposedRefs","useBodyPointerEvents","useCallbackRef","useEscapeKeydown","DISMISSABLE_LAYER_NAME","CONTEXT_UPDATE","POINTER_DOWN_OUTSIDE","FOCUS_OUTSIDE","DismissableLayerContext","createContext","layers","Set","layersWithOutsidePointerEventsDisabled","branches","DismissableLayer","forwardRef","props","forwardedRef","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","context","useContext","node","setNode","useState","force","composedRefs","Array","from","highestLayerWithOutsidePointerEventsDisabled","slice","highestLayerWithOutsidePointerEventsDisabledIndex","indexOf","index","isBodyPointerEventsDisabled","size","isPointerEventsEnabled","pointerDownOutside","usePointerDownOutside","event","target","isPointerDownOnBranch","some","branch","contains","defaultPrevented","focusOutside","useFocusOutside","isFocusInBranch","isHighestLayer","disabled","useEffect","add","dispatchUpdate","delete","handleUpdate","document","addEventListener","removeEventListener","pointerEvents","undefined","style","onFocusCapture","onBlurCapture","onPointerDownCapture","BRANCH_NAME","DismissableLayerBranch","ref","useRef","current","handlePointerDownOutside","isPointerInsideReactTreeRef","handlePointerDown","eventDetail","originalEvent","dispatchCustomEvent","timerId","window","setTimeout","clearTimeout","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","Event","dispatchEvent","name","handler","detail","CustomEvent","bubbles","cancelable","once","Root","Branch"],"version":3,"file":"index.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react/dismissable-layer/src/index.ts","packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["export * from './DismissableLayer';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nlet originalBodyPointerEvents: string;\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set<DismissableLayerElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState<DismissableLayerElement | null>(null);\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault();\n onDismiss();\n }\n });\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = document.body.style.pointerEvents;\n document.body.style.pointerEvents = 'none';\n }\n context.layersWithOutsidePointerEventsDisabled.add(node);\n }\n context.layers.add(node);\n dispatchUpdate();\n return () => {\n if (\n disableOutsidePointerEvents &&\n context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n document.body.style.pointerEvents = originalBodyPointerEvents;\n }\n };\n }, [node, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n <Primitive.div\n {...layerProps}\n ref={composedRefs}\n style={{\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n ...props.style,\n }}\n onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n onPointerDownCapture={composeEventHandlers(\n props.onPointerDownCapture,\n pointerDownOutside.onPointerDownCapture\n )}\n />\n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef<DismissableLayerBranchElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n const handleClickRef = React.useRef(() => {});\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n\n function handleAndDispatchPointerDownOutsideEvent() {\n handleAndDispatchCustomEvent(\n POINTER_DOWN_OUTSIDE,\n handlePointerDownOutside,\n eventDetail,\n { discrete: true }\n );\n }\n\n /**\n * On touch devices, we need to wait for a click event because browsers implement\n * a ~350ms delay between the time the user stops touching the display and when the\n * browser executres events. We need to ensure we don't reactivate pointer-events within\n * this timeframe otherwise the browser may execute events that should have been prevented.\n *\n * Additionally, this also lets us deal automatically with cancellations when a click event\n * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n *\n * This is why we also continuously remove the previous listener, because we cannot be\n * certain that it was raised, and therefore cleaned-up.\n */\n if (event.pointerType === 'touch') {\n document.removeEventListener('click', handleClickRef.current);\n handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;\n document.addEventListener('click', handleClickRef.current, { once: true });\n } else {\n handleAndDispatchPointerDownOutsideEvent();\n }\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n document.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n document.removeEventListener('pointerdown', handlePointerDown);\n document.removeEventListener('click', handleClickRef.current);\n };\n }, [handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n discrete: false,\n });\n }\n };\n document.addEventListener('focusin', handleFocus);\n return () => document.removeEventListener('focusin', handleFocus);\n }, [handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new CustomEvent(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),\n { discrete }: { discrete: boolean }\n) {\n const target = detail.originalEvent.target;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n\n if (discrete) {\n dispatchDiscreteCustomEvent(target, event);\n } else {\n target.dispatchEvent(event);\n }\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n"],"names":["React","composeEventHandlers","Primitive","dispatchDiscreteCustomEvent","useComposedRefs","useCallbackRef","useEscapeKeydown","DISMISSABLE_LAYER_NAME","CONTEXT_UPDATE","POINTER_DOWN_OUTSIDE","FOCUS_OUTSIDE","originalBodyPointerEvents","DismissableLayerContext","createContext","layers","Set","layersWithOutsidePointerEventsDisabled","branches","DismissableLayer","forwardRef","props","forwardedRef","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","context","useContext","node","setNode","useState","force","composedRefs","Array","from","highestLayerWithOutsidePointerEventsDisabled","slice","highestLayerWithOutsidePointerEventsDisabledIndex","indexOf","index","isBodyPointerEventsDisabled","size","isPointerEventsEnabled","pointerDownOutside","usePointerDownOutside","event","target","isPointerDownOnBranch","some","branch","contains","defaultPrevented","focusOutside","useFocusOutside","isFocusInBranch","isHighestLayer","preventDefault","useEffect","document","body","style","pointerEvents","add","dispatchUpdate","delete","handleUpdate","addEventListener","removeEventListener","undefined","onFocusCapture","onBlurCapture","onPointerDownCapture","BRANCH_NAME","DismissableLayerBranch","ref","useRef","current","handlePointerDownOutside","isPointerInsideReactTreeRef","handleClickRef","handlePointerDown","eventDetail","originalEvent","handleAndDispatchPointerDownOutsideEvent","handleAndDispatchCustomEvent","discrete","pointerType","once","timerId","window","setTimeout","clearTimeout","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","CustomEvent","dispatchEvent","name","handler","detail","bubbles","cancelable","Root","Branch"],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import $kqwpH$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import {createContext as $kqwpH$createContext, forwardRef as $kqwpH$forwardRef, useContext as $kqwpH$useContext, useState as $kqwpH$useState, useEffect as $kqwpH$useEffect, createElement as $kqwpH$createElement, useRef as $kqwpH$useRef} from "react";
|
|
3
3
|
import {composeEventHandlers as $kqwpH$composeEventHandlers} from "@radix-ui/primitive";
|
|
4
|
-
import {Primitive as $kqwpH$Primitive} from "@radix-ui/react-primitive";
|
|
4
|
+
import {Primitive as $kqwpH$Primitive, dispatchDiscreteCustomEvent as $kqwpH$dispatchDiscreteCustomEvent} from "@radix-ui/react-primitive";
|
|
5
5
|
import {useComposedRefs as $kqwpH$useComposedRefs} from "@radix-ui/react-compose-refs";
|
|
6
|
-
import {useBodyPointerEvents as $kqwpH$useBodyPointerEvents} from "@radix-ui/react-use-body-pointer-events";
|
|
7
6
|
import {useCallbackRef as $kqwpH$useCallbackRef} from "@radix-ui/react-use-callback-ref";
|
|
8
7
|
import {useEscapeKeydown as $kqwpH$useEscapeKeydown} from "@radix-ui/react-use-escape-keydown";
|
|
9
8
|
|
|
@@ -23,13 +22,13 @@ $parcel$export($5cb92bef7577960e$exports, "Branch", () => $5cb92bef7577960e$expo
|
|
|
23
22
|
|
|
24
23
|
|
|
25
24
|
|
|
26
|
-
|
|
27
25
|
/* -------------------------------------------------------------------------------------------------
|
|
28
26
|
* DismissableLayer
|
|
29
27
|
* -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer';
|
|
30
28
|
const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update';
|
|
31
29
|
const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';
|
|
32
30
|
const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';
|
|
31
|
+
let $5cb92bef7577960e$var$originalBodyPointerEvents;
|
|
33
32
|
const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ $kqwpH$createContext({
|
|
34
33
|
layers: new Set(),
|
|
35
34
|
layersWithOutsidePointerEventsDisabled: new Set(),
|
|
@@ -76,16 +75,25 @@ const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ $kqwpH$forwardRe
|
|
|
76
75
|
const isHighestLayer = index === context.layers.size - 1;
|
|
77
76
|
if (!isHighestLayer) return;
|
|
78
77
|
onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event);
|
|
79
|
-
if (!event.defaultPrevented
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
78
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
79
|
+
event.preventDefault();
|
|
80
|
+
onDismiss();
|
|
81
|
+
}
|
|
83
82
|
});
|
|
84
83
|
$kqwpH$useEffect(()=>{
|
|
85
84
|
if (!node1) return;
|
|
86
|
-
if (disableOutsidePointerEvents)
|
|
85
|
+
if (disableOutsidePointerEvents) {
|
|
86
|
+
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
87
|
+
$5cb92bef7577960e$var$originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
88
|
+
document.body.style.pointerEvents = 'none';
|
|
89
|
+
}
|
|
90
|
+
context.layersWithOutsidePointerEventsDisabled.add(node1);
|
|
91
|
+
}
|
|
87
92
|
context.layers.add(node1);
|
|
88
93
|
$5cb92bef7577960e$var$dispatchUpdate();
|
|
94
|
+
return ()=>{
|
|
95
|
+
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) document.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents;
|
|
96
|
+
};
|
|
89
97
|
}, [
|
|
90
98
|
node1,
|
|
91
99
|
disableOutsidePointerEvents,
|
|
@@ -160,13 +168,36 @@ const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ $kqwpH$forwardRe
|
|
|
160
168
|
*/ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside) {
|
|
161
169
|
const handlePointerDownOutside = $kqwpH$useCallbackRef(onPointerDownOutside);
|
|
162
170
|
const isPointerInsideReactTreeRef = $kqwpH$useRef(false);
|
|
171
|
+
const handleClickRef = $kqwpH$useRef(()=>{});
|
|
163
172
|
$kqwpH$useEffect(()=>{
|
|
164
173
|
const handlePointerDown = (event)=>{
|
|
165
174
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
166
175
|
const eventDetail = {
|
|
167
176
|
originalEvent: event
|
|
168
177
|
};
|
|
169
|
-
|
|
178
|
+
function handleAndDispatchPointerDownOutsideEvent() {
|
|
179
|
+
$5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, {
|
|
180
|
+
discrete: true
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
/**
|
|
184
|
+
* On touch devices, we need to wait for a click event because browsers implement
|
|
185
|
+
* a ~350ms delay between the time the user stops touching the display and when the
|
|
186
|
+
* browser executres events. We need to ensure we don't reactivate pointer-events within
|
|
187
|
+
* this timeframe otherwise the browser may execute events that should have been prevented.
|
|
188
|
+
*
|
|
189
|
+
* Additionally, this also lets us deal automatically with cancellations when a click event
|
|
190
|
+
* isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
|
|
191
|
+
*
|
|
192
|
+
* This is why we also continuously remove the previous listener, because we cannot be
|
|
193
|
+
* certain that it was raised, and therefore cleaned-up.
|
|
194
|
+
*/ if (event.pointerType === 'touch') {
|
|
195
|
+
document.removeEventListener('click', handleClickRef.current);
|
|
196
|
+
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;
|
|
197
|
+
document.addEventListener('click', handleClickRef.current, {
|
|
198
|
+
once: true
|
|
199
|
+
});
|
|
200
|
+
} else handleAndDispatchPointerDownOutsideEvent();
|
|
170
201
|
}
|
|
171
202
|
isPointerInsideReactTreeRef.current = false;
|
|
172
203
|
};
|
|
@@ -188,6 +219,7 @@ const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ $kqwpH$forwardRe
|
|
|
188
219
|
return ()=>{
|
|
189
220
|
window.clearTimeout(timerId);
|
|
190
221
|
document.removeEventListener('pointerdown', handlePointerDown);
|
|
222
|
+
document.removeEventListener('click', handleClickRef.current);
|
|
191
223
|
};
|
|
192
224
|
}, [
|
|
193
225
|
handlePointerDownOutside
|
|
@@ -209,7 +241,9 @@ const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ $kqwpH$forwardRe
|
|
|
209
241
|
const eventDetail = {
|
|
210
242
|
originalEvent: event
|
|
211
243
|
};
|
|
212
|
-
$5cb92bef7577960e$var$
|
|
244
|
+
$5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
245
|
+
discrete: false
|
|
246
|
+
});
|
|
213
247
|
}
|
|
214
248
|
};
|
|
215
249
|
document.addEventListener('focusin', handleFocus);
|
|
@@ -225,10 +259,10 @@ const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ $kqwpH$forwardRe
|
|
|
225
259
|
};
|
|
226
260
|
}
|
|
227
261
|
function $5cb92bef7577960e$var$dispatchUpdate() {
|
|
228
|
-
const event = new
|
|
262
|
+
const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE);
|
|
229
263
|
document.dispatchEvent(event);
|
|
230
264
|
}
|
|
231
|
-
function $5cb92bef7577960e$var$
|
|
265
|
+
function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) {
|
|
232
266
|
const target = detail.originalEvent.target;
|
|
233
267
|
const event = new CustomEvent(name, {
|
|
234
268
|
bubbles: false,
|
|
@@ -238,7 +272,8 @@ function $5cb92bef7577960e$var$dispatchCustomEvent(name, handler, detail) {
|
|
|
238
272
|
if (handler) target.addEventListener(name, handler, {
|
|
239
273
|
once: true
|
|
240
274
|
});
|
|
241
|
-
|
|
275
|
+
if (discrete) $kqwpH$dispatchDiscreteCustomEvent(target, event);
|
|
276
|
+
else target.dispatchEvent(event);
|
|
242
277
|
}
|
|
243
278
|
const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = $5cb92bef7577960e$export$177fb62ff3ec1f22;
|
|
244
279
|
const $5cb92bef7577960e$export$aecb2ddcb55c95be = $5cb92bef7577960e$export$4d5eb2109db14228;
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["packages/react/dismissable-layer/src/index.ts","packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["export * from './DismissableLayer';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useBodyPointerEvents } from '@radix-ui/react-use-body-pointer-events';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set<DismissableLayerElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState<DismissableLayerElement | null>(null);\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n useBodyPointerEvents({ disabled: disableOutsidePointerEvents });\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) context.layersWithOutsidePointerEventsDisabled.add(node);\n context.layers.add(node);\n dispatchUpdate();\n }, [node, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n <Primitive.div\n {...layerProps}\n ref={composedRefs}\n style={{\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n ...props.style,\n }}\n onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n onPointerDownCapture={composeEventHandlers(\n props.onPointerDownCapture,\n pointerDownOutside.onPointerDownCapture\n )}\n />\n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef<DismissableLayerBranchElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n dispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail);\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n document.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n document.removeEventListener('pointerdown', handlePointerDown);\n };\n }, [handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n dispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail);\n }\n };\n document.addEventListener('focusin', handleFocus);\n return () => document.removeEventListener('focusin', handleFocus);\n }, [handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new Event(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction dispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never)\n) {\n const target = detail.originalEvent.target as HTMLElement;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n return !target.dispatchEvent(event);\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n"],"names":["React","composeEventHandlers","Primitive","useComposedRefs","useBodyPointerEvents","useCallbackRef","useEscapeKeydown","DISMISSABLE_LAYER_NAME","CONTEXT_UPDATE","POINTER_DOWN_OUTSIDE","FOCUS_OUTSIDE","DismissableLayerContext","createContext","layers","Set","layersWithOutsidePointerEventsDisabled","branches","DismissableLayer","forwardRef","props","forwardedRef","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","context","useContext","node","setNode","useState","force","composedRefs","Array","from","highestLayerWithOutsidePointerEventsDisabled","slice","highestLayerWithOutsidePointerEventsDisabledIndex","indexOf","index","isBodyPointerEventsDisabled","size","isPointerEventsEnabled","pointerDownOutside","usePointerDownOutside","event","target","isPointerDownOnBranch","some","branch","contains","defaultPrevented","focusOutside","useFocusOutside","isFocusInBranch","isHighestLayer","disabled","useEffect","add","dispatchUpdate","delete","handleUpdate","document","addEventListener","removeEventListener","pointerEvents","undefined","style","onFocusCapture","onBlurCapture","onPointerDownCapture","BRANCH_NAME","DismissableLayerBranch","ref","useRef","current","handlePointerDownOutside","isPointerInsideReactTreeRef","handlePointerDown","eventDetail","originalEvent","dispatchCustomEvent","timerId","window","setTimeout","clearTimeout","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","Event","dispatchEvent","name","handler","detail","CustomEvent","bubbles","cancelable","once","Root","Branch"],"version":3,"file":"index.module.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react/dismissable-layer/src/index.ts","packages/react/dismissable-layer/src/DismissableLayer.tsx"],"sourcesContent":["export * from './DismissableLayer';\n","import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { Primitive, dispatchDiscreteCustomEvent } from '@radix-ui/react-primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref';\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown';\n\nimport type * as Radix from '@radix-ui/react-primitive';\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayer\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'DismissableLayer';\nconst CONTEXT_UPDATE = 'dismissableLayer.update';\nconst POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside';\nconst FOCUS_OUTSIDE = 'dismissableLayer.focusOutside';\n\nlet originalBodyPointerEvents: string;\n\nconst DismissableLayerContext = React.createContext({\n layers: new Set<DismissableLayerElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<DismissableLayerElement>(),\n branches: new Set<DismissableLayerBranchElement>(),\n});\n\ntype DismissableLayerElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DismissableLayerProps extends PrimitiveDivProps {\n /**\n * When `true`, hover/focus/click interactions will be disabled on elements outside\n * the `DismissableLayer`. Users will need to click twice on outside elements to\n * interact with them: once to close the `DismissableLayer`, and again to trigger the element.\n */\n disableOutsidePointerEvents?: boolean;\n /**\n * Event handler called when the escape key is down.\n * Can be prevented.\n */\n onEscapeKeyDown?: (event: KeyboardEvent) => void;\n /**\n * Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;\n /**\n * Event handler called when the focus moves outside of the `DismissableLayer`.\n * Can be prevented.\n */\n onFocusOutside?: (event: FocusOutsideEvent) => void;\n /**\n * Event handler called when an interaction happens outside the `DismissableLayer`.\n * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.\n * Can be prevented.\n */\n onInteractOutside?: (event: PointerDownOutsideEvent | FocusOutsideEvent) => void;\n /**\n * Handler called when the `DismissableLayer` should be dismissed\n */\n onDismiss?: () => void;\n}\n\nconst DismissableLayer = React.forwardRef<DismissableLayerElement, DismissableLayerProps>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n onEscapeKeyDown,\n onPointerDownOutside,\n onFocusOutside,\n onInteractOutside,\n onDismiss,\n ...layerProps\n } = props;\n const context = React.useContext(DismissableLayerContext);\n const [node, setNode] = React.useState<DismissableLayerElement | null>(null);\n const [, force] = React.useState({});\n const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node));\n const layers = Array.from(context.layers);\n const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1); // prettier-ignore\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore\n const index = node ? layers.indexOf(node) : -1;\n const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;\n const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLElement;\n const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));\n if (!isPointerEventsEnabled || isPointerDownOnBranch) return;\n onPointerDownOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n const focusOutside = useFocusOutside((event) => {\n const target = event.target as HTMLElement;\n const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));\n if (isFocusInBranch) return;\n onFocusOutside?.(event);\n onInteractOutside?.(event);\n if (!event.defaultPrevented) onDismiss?.();\n });\n\n useEscapeKeydown((event) => {\n const isHighestLayer = index === context.layers.size - 1;\n if (!isHighestLayer) return;\n onEscapeKeyDown?.(event);\n if (!event.defaultPrevented && onDismiss) {\n event.preventDefault();\n onDismiss();\n }\n });\n\n React.useEffect(() => {\n if (!node) return;\n if (disableOutsidePointerEvents) {\n if (context.layersWithOutsidePointerEventsDisabled.size === 0) {\n originalBodyPointerEvents = document.body.style.pointerEvents;\n document.body.style.pointerEvents = 'none';\n }\n context.layersWithOutsidePointerEventsDisabled.add(node);\n }\n context.layers.add(node);\n dispatchUpdate();\n return () => {\n if (\n disableOutsidePointerEvents &&\n context.layersWithOutsidePointerEventsDisabled.size === 1\n ) {\n document.body.style.pointerEvents = originalBodyPointerEvents;\n }\n };\n }, [node, disableOutsidePointerEvents, context]);\n\n /**\n * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect\n * because a change to `disableOutsidePointerEvents` would remove this layer from the stack\n * and add it to the end again so the layering order wouldn't be _creation order_.\n * We only want them to be removed from context stacks when unmounted.\n */\n React.useEffect(() => {\n return () => {\n if (!node) return;\n context.layers.delete(node);\n context.layersWithOutsidePointerEventsDisabled.delete(node);\n dispatchUpdate();\n };\n }, [node, context]);\n\n React.useEffect(() => {\n const handleUpdate = () => force({});\n document.addEventListener(CONTEXT_UPDATE, handleUpdate);\n return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);\n }, []);\n\n return (\n <Primitive.div\n {...layerProps}\n ref={composedRefs}\n style={{\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n ...props.style,\n }}\n onFocusCapture={composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture)}\n onBlurCapture={composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture)}\n onPointerDownCapture={composeEventHandlers(\n props.onPointerDownCapture,\n pointerDownOutside.onPointerDownCapture\n )}\n />\n );\n }\n);\n\nDismissableLayer.displayName = DISMISSABLE_LAYER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableLayerBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableLayerBranch';\n\ntype DismissableLayerBranchElement = React.ElementRef<typeof Primitive.div>;\ninterface DismissableLayerBranchProps extends PrimitiveDivProps {}\n\nconst DismissableLayerBranch = React.forwardRef<\n DismissableLayerBranchElement,\n DismissableLayerBranchProps\n>((props, forwardedRef) => {\n const context = React.useContext(DismissableLayerContext);\n const ref = React.useRef<DismissableLayerBranchElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, ref);\n\n React.useEffect(() => {\n const node = ref.current;\n if (node) {\n context.branches.add(node);\n return () => {\n context.branches.delete(node);\n };\n }\n }, [context.branches]);\n\n return <Primitive.div {...props} ref={composedRefs} />;\n});\n\nDismissableLayerBranch.displayName = BRANCH_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;\ntype FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;\n\n/**\n * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup`\n * to mimic layer dismissing behaviour present in OS.\n * Returns props to pass to the node we want to check for outside events.\n */\nfunction usePointerDownOutside(onPointerDownOutside?: (event: PointerDownOutsideEvent) => void) {\n const handlePointerDownOutside = useCallbackRef(onPointerDownOutside) as EventListener;\n const isPointerInsideReactTreeRef = React.useRef(false);\n const handleClickRef = React.useRef(() => {});\n\n React.useEffect(() => {\n const handlePointerDown = (event: PointerEvent) => {\n if (event.target && !isPointerInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n\n function handleAndDispatchPointerDownOutsideEvent() {\n handleAndDispatchCustomEvent(\n POINTER_DOWN_OUTSIDE,\n handlePointerDownOutside,\n eventDetail,\n { discrete: true }\n );\n }\n\n /**\n * On touch devices, we need to wait for a click event because browsers implement\n * a ~350ms delay between the time the user stops touching the display and when the\n * browser executres events. We need to ensure we don't reactivate pointer-events within\n * this timeframe otherwise the browser may execute events that should have been prevented.\n *\n * Additionally, this also lets us deal automatically with cancellations when a click event\n * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.\n *\n * This is why we also continuously remove the previous listener, because we cannot be\n * certain that it was raised, and therefore cleaned-up.\n */\n if (event.pointerType === 'touch') {\n document.removeEventListener('click', handleClickRef.current);\n handleClickRef.current = handleAndDispatchPointerDownOutsideEvent;\n document.addEventListener('click', handleClickRef.current, { once: true });\n } else {\n handleAndDispatchPointerDownOutsideEvent();\n }\n }\n isPointerInsideReactTreeRef.current = false;\n };\n /**\n * if this hook executes in a component that mounts via a `pointerdown` event, the event\n * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid\n * this by delaying the event listener registration on the document.\n * This is not React specific, but rather how the DOM works, ie:\n * ```\n * button.addEventListener('pointerdown', () => {\n * console.log('I will log');\n * document.addEventListener('pointerdown', () => {\n * console.log('I will also log');\n * })\n * });\n */\n const timerId = window.setTimeout(() => {\n document.addEventListener('pointerdown', handlePointerDown);\n }, 0);\n return () => {\n window.clearTimeout(timerId);\n document.removeEventListener('pointerdown', handlePointerDown);\n document.removeEventListener('click', handleClickRef.current);\n };\n }, [handlePointerDownOutside]);\n\n return {\n // ensures we check React component tree (not just DOM tree)\n onPointerDownCapture: () => (isPointerInsideReactTreeRef.current = true),\n };\n}\n\n/**\n * Listens for when focus happens outside a react subtree.\n * Returns props to pass to the root (node) of the subtree we want to check.\n */\nfunction useFocusOutside(onFocusOutside?: (event: FocusOutsideEvent) => void) {\n const handleFocusOutside = useCallbackRef(onFocusOutside) as EventListener;\n const isFocusInsideReactTreeRef = React.useRef(false);\n\n React.useEffect(() => {\n const handleFocus = (event: FocusEvent) => {\n if (event.target && !isFocusInsideReactTreeRef.current) {\n const eventDetail = { originalEvent: event };\n handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {\n discrete: false,\n });\n }\n };\n document.addEventListener('focusin', handleFocus);\n return () => document.removeEventListener('focusin', handleFocus);\n }, [handleFocusOutside]);\n\n return {\n onFocusCapture: () => (isFocusInsideReactTreeRef.current = true),\n onBlurCapture: () => (isFocusInsideReactTreeRef.current = false),\n };\n}\n\nfunction dispatchUpdate() {\n const event = new CustomEvent(CONTEXT_UPDATE);\n document.dispatchEvent(event);\n}\n\nfunction handleAndDispatchCustomEvent<E extends CustomEvent, OriginalEvent extends Event>(\n name: string,\n handler: ((event: E) => void) | undefined,\n detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D> ? D : never),\n { discrete }: { discrete: boolean }\n) {\n const target = detail.originalEvent.target;\n const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });\n if (handler) target.addEventListener(name, handler as EventListener, { once: true });\n\n if (discrete) {\n dispatchDiscreteCustomEvent(target, event);\n } else {\n target.dispatchEvent(event);\n }\n}\n\nconst Root = DismissableLayer;\nconst Branch = DismissableLayerBranch;\n\nexport {\n DismissableLayer,\n DismissableLayerBranch,\n //\n Root,\n Branch,\n};\nexport type { DismissableLayerProps };\n"],"names":["React","composeEventHandlers","Primitive","dispatchDiscreteCustomEvent","useComposedRefs","useCallbackRef","useEscapeKeydown","DISMISSABLE_LAYER_NAME","CONTEXT_UPDATE","POINTER_DOWN_OUTSIDE","FOCUS_OUTSIDE","originalBodyPointerEvents","DismissableLayerContext","createContext","layers","Set","layersWithOutsidePointerEventsDisabled","branches","DismissableLayer","forwardRef","props","forwardedRef","disableOutsidePointerEvents","onEscapeKeyDown","onPointerDownOutside","onFocusOutside","onInteractOutside","onDismiss","layerProps","context","useContext","node","setNode","useState","force","composedRefs","Array","from","highestLayerWithOutsidePointerEventsDisabled","slice","highestLayerWithOutsidePointerEventsDisabledIndex","indexOf","index","isBodyPointerEventsDisabled","size","isPointerEventsEnabled","pointerDownOutside","usePointerDownOutside","event","target","isPointerDownOnBranch","some","branch","contains","defaultPrevented","focusOutside","useFocusOutside","isFocusInBranch","isHighestLayer","preventDefault","useEffect","document","body","style","pointerEvents","add","dispatchUpdate","delete","handleUpdate","addEventListener","removeEventListener","undefined","onFocusCapture","onBlurCapture","onPointerDownCapture","BRANCH_NAME","DismissableLayerBranch","ref","useRef","current","handlePointerDownOutside","isPointerInsideReactTreeRef","handleClickRef","handlePointerDown","eventDetail","originalEvent","handleAndDispatchPointerDownOutsideEvent","handleAndDispatchCustomEvent","discrete","pointerType","once","timerId","window","setTimeout","clearTimeout","handleFocusOutside","isFocusInsideReactTreeRef","handleFocus","CustomEvent","dispatchEvent","name","handler","detail","bubbles","cancelable","Root","Branch"],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-dismissable-layer",
|
|
3
|
-
"version": "0.1.6-rc.
|
|
3
|
+
"version": "0.1.6-rc.40",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -18,17 +18,17 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime": "^7.13.10",
|
|
20
20
|
"@radix-ui/primitive": "0.1.0",
|
|
21
|
-
"@radix-ui/react-compose-refs": "0.1.1-rc.
|
|
22
|
-
"@radix-ui/react-primitive": "0.1.5-rc.
|
|
23
|
-
"@radix-ui/react-use-
|
|
24
|
-
"@radix-ui/react-use-
|
|
25
|
-
"@radix-ui/react-use-escape-keydown": "0.1.1-rc.4"
|
|
21
|
+
"@radix-ui/react-compose-refs": "0.1.1-rc.40",
|
|
22
|
+
"@radix-ui/react-primitive": "0.1.5-rc.40",
|
|
23
|
+
"@radix-ui/react-use-callback-ref": "0.1.1-rc.40",
|
|
24
|
+
"@radix-ui/react-use-escape-keydown": "0.1.1-rc.40"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
28
|
-
"react-remove-scroll": "
|
|
27
|
+
"react-remove-scroll": "2.5.4"
|
|
29
28
|
},
|
|
30
29
|
"peerDependencies": {
|
|
31
|
-
"react": "^16.8 || ^17.0 || ^18.0"
|
|
30
|
+
"react": "^16.8 || ^17.0 || ^18.0",
|
|
31
|
+
"react-dom": "^16.8 || ^17.0 || ^18.0"
|
|
32
32
|
},
|
|
33
33
|
"homepage": "https://radix-ui.com/primitives",
|
|
34
34
|
"repository": {
|