@tamagui/dismissable 1.0.1-beta.70 → 1.0.1-beta.73
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/cjs/Dismissable.js +5 -12
- package/dist/cjs/Dismissable.js.map +1 -1
- package/dist/esm/Dismissable.js +5 -13
- package/dist/esm/Dismissable.js.map +1 -1
- package/dist/jsx/Dismissable.js +5 -13
- package/package.json +4 -4
- package/types/Dismissable.d.ts +0 -0
- package/types/Dismissable.d.ts.map +0 -0
- package/types/Dismissable.native.d.ts +0 -0
- package/types/Dismissable.native.d.ts.map +0 -0
- package/types/DismissableProps.d.ts +0 -0
- package/types/DismissableProps.d.ts.map +0 -0
- package/types/index.d.ts +0 -0
- package/types/index.d.ts.map +0 -0
package/dist/cjs/Dismissable.js
CHANGED
|
@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
|
|
|
21
21
|
return a;
|
|
22
22
|
};
|
|
23
23
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
25
24
|
var __objRest = (source, exclude) => {
|
|
26
25
|
var target = {};
|
|
27
26
|
for (var prop in source)
|
|
@@ -66,7 +65,6 @@ function dispatchDiscreteCustomEvent(target, event) {
|
|
|
66
65
|
if (target)
|
|
67
66
|
ReactDOM.flushSync(() => target.dispatchEvent(event));
|
|
68
67
|
}
|
|
69
|
-
__name(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
|
|
70
68
|
const DISMISSABLE_LAYER_NAME = "Dismissable";
|
|
71
69
|
const CONTEXT_UPDATE = "dismissable.update";
|
|
72
70
|
const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
|
|
@@ -161,7 +159,7 @@ const Dismissable = React.forwardRef((props, forwardedRef) => {
|
|
|
161
159
|
};
|
|
162
160
|
}, [node, context]);
|
|
163
161
|
React.useEffect(() => {
|
|
164
|
-
const handleUpdate =
|
|
162
|
+
const handleUpdate = () => force({});
|
|
165
163
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
166
164
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
167
165
|
}, []);
|
|
@@ -204,12 +202,11 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
204
202
|
const handleClickRef = React.useRef(() => {
|
|
205
203
|
});
|
|
206
204
|
React.useEffect(() => {
|
|
207
|
-
const handlePointerDown =
|
|
205
|
+
const handlePointerDown = (event) => {
|
|
208
206
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
209
207
|
let handleAndDispatchPointerDownOutsideEvent = function() {
|
|
210
208
|
handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true });
|
|
211
209
|
};
|
|
212
|
-
__name(handleAndDispatchPointerDownOutsideEvent, "handleAndDispatchPointerDownOutsideEvent");
|
|
213
210
|
const eventDetail = { originalEvent: event };
|
|
214
211
|
if (event.pointerType === "touch") {
|
|
215
212
|
document.removeEventListener("click", handleClickRef.current);
|
|
@@ -220,7 +217,7 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
220
217
|
}
|
|
221
218
|
}
|
|
222
219
|
isPointerInsideReactTreeRef.current = false;
|
|
223
|
-
}
|
|
220
|
+
};
|
|
224
221
|
const timerId = window.setTimeout(() => {
|
|
225
222
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
226
223
|
}, 0);
|
|
@@ -234,19 +231,18 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
234
231
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
235
232
|
};
|
|
236
233
|
}
|
|
237
|
-
__name(usePointerDownOutside, "usePointerDownOutside");
|
|
238
234
|
function useFocusOutside(onFocusOutside) {
|
|
239
235
|
const handleFocusOutside = (0, import_react_use_callback_ref.useCallbackRef)(onFocusOutside);
|
|
240
236
|
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
241
237
|
React.useEffect(() => {
|
|
242
|
-
const handleFocus =
|
|
238
|
+
const handleFocus = (event) => {
|
|
243
239
|
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
244
240
|
const eventDetail = { originalEvent: event };
|
|
245
241
|
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
246
242
|
discrete: false
|
|
247
243
|
});
|
|
248
244
|
}
|
|
249
|
-
}
|
|
245
|
+
};
|
|
250
246
|
document.addEventListener("focusin", handleFocus);
|
|
251
247
|
return () => document.removeEventListener("focusin", handleFocus);
|
|
252
248
|
}, [handleFocusOutside]);
|
|
@@ -255,12 +251,10 @@ function useFocusOutside(onFocusOutside) {
|
|
|
255
251
|
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
256
252
|
};
|
|
257
253
|
}
|
|
258
|
-
__name(useFocusOutside, "useFocusOutside");
|
|
259
254
|
function dispatchUpdate() {
|
|
260
255
|
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
261
256
|
document.dispatchEvent(event);
|
|
262
257
|
}
|
|
263
|
-
__name(dispatchUpdate, "dispatchUpdate");
|
|
264
258
|
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
265
259
|
const target = detail.originalEvent.target;
|
|
266
260
|
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
@@ -272,7 +266,6 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
|
272
266
|
target.dispatchEvent(event);
|
|
273
267
|
}
|
|
274
268
|
}
|
|
275
|
-
__name(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
|
|
276
269
|
const Root = Dismissable;
|
|
277
270
|
const Branch = DismissableBranch;
|
|
278
271
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dismissable.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n if (target) ReactDOM.flushSync(() => target.dispatchEvent(event))\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dismissable\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'Dismissable'\nconst CONTEXT_UPDATE = 'dismissable.update'\nconst POINTER_DOWN_OUTSIDE = 'dismissable.pointerDownOutside'\nconst FOCUS_OUTSIDE = 'dismissable.focusOutside'\n\nlet originalBodyPointerEvents: string\n\nconst DismissableContext = React.createContext({\n layers: new Set<HTMLDivElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<HTMLDivElement>(),\n branches: new Set<HTMLDivElement>(),\n})\n\nconst Dismissable = React.forwardRef<HTMLDivElement, DismissableProps>((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(DismissableContext)\n const [node, setNode] = React.useState<HTMLDivElement | 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 HTMLDivElement\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 HTMLDivElement\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 <div\n {...layerProps}\n // @ts-ignore\n ref={composedRefs}\n style={{\n display: 'contents',\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n // @ts-ignore\n ...props.style,\n }}\n onFocusCapture={composeEventHandlers(\n // @ts-ignore\n props.onFocusCapture,\n focusOutside.onFocusCapture\n )}\n onBlurCapture={composeEventHandlers(\n // @ts-ignore\n props.onBlurCapture,\n focusOutside.onBlurCapture\n )}\n // @ts-ignore\n onPointerDownCapture={composeEventHandlers(\n // @ts-ignore\n props.onPointerDownCapture,\n pointerDownOutside.onPointerDownCapture\n )}\n />\n )\n})\n\nDismissable.displayName = DISMISSABLE_LAYER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableBranch'\n\nconst DismissableBranch = React.forwardRef<HTMLDivElement, DismissableBranchProps>(\n (props, forwardedRef) => {\n const context = React.useContext(DismissableContext)\n const ref = React.useRef<HTMLDivElement>(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 <div style={{ display: 'contents' }} {...props} ref={composedRefs} />\n }\n)\n\nDismissableBranch.displayName = BRANCH_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>\nexport type 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 = Dismissable\nconst Branch = DismissableBranch\n\nexport {\n Dismissable,\n DismissableBranch,\n //\n Root,\n Branch,\n}\n\nexport type { DismissableProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/Dismissable.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
4
2
|
import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
|
|
5
3
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
@@ -10,7 +8,6 @@ function dispatchDiscreteCustomEvent(target, event) {
|
|
|
10
8
|
if (target)
|
|
11
9
|
ReactDOM.flushSync(() => target.dispatchEvent(event));
|
|
12
10
|
}
|
|
13
|
-
__name(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
|
|
14
11
|
const DISMISSABLE_LAYER_NAME = "Dismissable";
|
|
15
12
|
const CONTEXT_UPDATE = "dismissable.update";
|
|
16
13
|
const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
|
|
@@ -99,7 +96,7 @@ const Dismissable = React.forwardRef((props, forwardedRef) => {
|
|
|
99
96
|
};
|
|
100
97
|
}, [node, context]);
|
|
101
98
|
React.useEffect(() => {
|
|
102
|
-
const handleUpdate =
|
|
99
|
+
const handleUpdate = () => force({});
|
|
103
100
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
104
101
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
105
102
|
}, []);
|
|
@@ -144,12 +141,11 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
144
141
|
const handleClickRef = React.useRef(() => {
|
|
145
142
|
});
|
|
146
143
|
React.useEffect(() => {
|
|
147
|
-
const handlePointerDown =
|
|
144
|
+
const handlePointerDown = (event) => {
|
|
148
145
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
149
146
|
let handleAndDispatchPointerDownOutsideEvent = function() {
|
|
150
147
|
handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true });
|
|
151
148
|
};
|
|
152
|
-
__name(handleAndDispatchPointerDownOutsideEvent, "handleAndDispatchPointerDownOutsideEvent");
|
|
153
149
|
const eventDetail = { originalEvent: event };
|
|
154
150
|
if (event.pointerType === "touch") {
|
|
155
151
|
document.removeEventListener("click", handleClickRef.current);
|
|
@@ -160,7 +156,7 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
160
156
|
}
|
|
161
157
|
}
|
|
162
158
|
isPointerInsideReactTreeRef.current = false;
|
|
163
|
-
}
|
|
159
|
+
};
|
|
164
160
|
const timerId = window.setTimeout(() => {
|
|
165
161
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
166
162
|
}, 0);
|
|
@@ -174,19 +170,18 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
174
170
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
175
171
|
};
|
|
176
172
|
}
|
|
177
|
-
__name(usePointerDownOutside, "usePointerDownOutside");
|
|
178
173
|
function useFocusOutside(onFocusOutside) {
|
|
179
174
|
const handleFocusOutside = useCallbackRef(onFocusOutside);
|
|
180
175
|
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
181
176
|
React.useEffect(() => {
|
|
182
|
-
const handleFocus =
|
|
177
|
+
const handleFocus = (event) => {
|
|
183
178
|
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
184
179
|
const eventDetail = { originalEvent: event };
|
|
185
180
|
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
186
181
|
discrete: false
|
|
187
182
|
});
|
|
188
183
|
}
|
|
189
|
-
}
|
|
184
|
+
};
|
|
190
185
|
document.addEventListener("focusin", handleFocus);
|
|
191
186
|
return () => document.removeEventListener("focusin", handleFocus);
|
|
192
187
|
}, [handleFocusOutside]);
|
|
@@ -195,12 +190,10 @@ function useFocusOutside(onFocusOutside) {
|
|
|
195
190
|
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
196
191
|
};
|
|
197
192
|
}
|
|
198
|
-
__name(useFocusOutside, "useFocusOutside");
|
|
199
193
|
function dispatchUpdate() {
|
|
200
194
|
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
201
195
|
document.dispatchEvent(event);
|
|
202
196
|
}
|
|
203
|
-
__name(dispatchUpdate, "dispatchUpdate");
|
|
204
197
|
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
205
198
|
const target = detail.originalEvent.target;
|
|
206
199
|
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
@@ -212,7 +205,6 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
|
212
205
|
target.dispatchEvent(event);
|
|
213
206
|
}
|
|
214
207
|
}
|
|
215
|
-
__name(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
|
|
216
208
|
const Root = Dismissable;
|
|
217
209
|
const Branch = DismissableBranch;
|
|
218
210
|
export {
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/Dismissable.tsx"],
|
|
4
4
|
"sourcesContent": ["// forked from radix-ui\n// https://github.com/radix-ui/primitives/blob/cfd8dcba5fa6a0e751486af418d05a7b88a7f541/packages/react/dismissable-layer/src/DismissableLayer.tsx#L324\n\nimport { useCallbackRef } from '@radix-ui/react-use-callback-ref'\nimport { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(target: E['target'], event: E) {\n if (target) ReactDOM.flushSync(() => target.dispatchEvent(event))\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Dismissable\n * -----------------------------------------------------------------------------------------------*/\n\nconst DISMISSABLE_LAYER_NAME = 'Dismissable'\nconst CONTEXT_UPDATE = 'dismissable.update'\nconst POINTER_DOWN_OUTSIDE = 'dismissable.pointerDownOutside'\nconst FOCUS_OUTSIDE = 'dismissable.focusOutside'\n\nlet originalBodyPointerEvents: string\n\nconst DismissableContext = React.createContext({\n layers: new Set<HTMLDivElement>(),\n layersWithOutsidePointerEventsDisabled: new Set<HTMLDivElement>(),\n branches: new Set<HTMLDivElement>(),\n})\n\nconst Dismissable = React.forwardRef<HTMLDivElement, DismissableProps>((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(DismissableContext)\n const [node, setNode] = React.useState<HTMLDivElement | 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 HTMLDivElement\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 HTMLDivElement\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 <div\n {...layerProps}\n // @ts-ignore\n ref={composedRefs}\n style={{\n display: 'contents',\n pointerEvents: isBodyPointerEventsDisabled\n ? isPointerEventsEnabled\n ? 'auto'\n : 'none'\n : undefined,\n // @ts-ignore\n ...props.style,\n }}\n onFocusCapture={composeEventHandlers(\n // @ts-ignore\n props.onFocusCapture,\n focusOutside.onFocusCapture\n )}\n onBlurCapture={composeEventHandlers(\n // @ts-ignore\n props.onBlurCapture,\n focusOutside.onBlurCapture\n )}\n // @ts-ignore\n onPointerDownCapture={composeEventHandlers(\n // @ts-ignore\n props.onPointerDownCapture,\n pointerDownOutside.onPointerDownCapture\n )}\n />\n )\n})\n\nDismissable.displayName = DISMISSABLE_LAYER_NAME\n\n/* -------------------------------------------------------------------------------------------------\n * DismissableBranch\n * -----------------------------------------------------------------------------------------------*/\n\nconst BRANCH_NAME = 'DismissableBranch'\n\nconst DismissableBranch = React.forwardRef<HTMLDivElement, DismissableBranchProps>(\n (props, forwardedRef) => {\n const context = React.useContext(DismissableContext)\n const ref = React.useRef<HTMLDivElement>(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 <div style={{ display: 'contents' }} {...props} ref={composedRefs} />\n }\n)\n\nDismissableBranch.displayName = BRANCH_NAME\n\n/* -----------------------------------------------------------------------------------------------*/\n\nexport type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>\nexport type 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 = Dismissable\nconst Branch = DismissableBranch\n\nexport {\n Dismissable,\n DismissableBranch,\n //\n Root,\n Branch,\n}\n\nexport type { DismissableProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/jsx/Dismissable.js
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
1
|
import { useCallbackRef } from "@radix-ui/react-use-callback-ref";
|
|
4
2
|
import { useEscapeKeydown } from "@radix-ui/react-use-escape-keydown";
|
|
5
3
|
import { useComposedRefs } from "@tamagui/compose-refs";
|
|
@@ -10,7 +8,6 @@ function dispatchDiscreteCustomEvent(target, event) {
|
|
|
10
8
|
if (target)
|
|
11
9
|
ReactDOM.flushSync(() => target.dispatchEvent(event));
|
|
12
10
|
}
|
|
13
|
-
__name(dispatchDiscreteCustomEvent, "dispatchDiscreteCustomEvent");
|
|
14
11
|
const DISMISSABLE_LAYER_NAME = "Dismissable";
|
|
15
12
|
const CONTEXT_UPDATE = "dismissable.update";
|
|
16
13
|
const POINTER_DOWN_OUTSIDE = "dismissable.pointerDownOutside";
|
|
@@ -99,7 +96,7 @@ const Dismissable = React.forwardRef((props, forwardedRef) => {
|
|
|
99
96
|
};
|
|
100
97
|
}, [node, context]);
|
|
101
98
|
React.useEffect(() => {
|
|
102
|
-
const handleUpdate =
|
|
99
|
+
const handleUpdate = () => force({});
|
|
103
100
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
104
101
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
105
102
|
}, []);
|
|
@@ -133,12 +130,11 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
133
130
|
const handleClickRef = React.useRef(() => {
|
|
134
131
|
});
|
|
135
132
|
React.useEffect(() => {
|
|
136
|
-
const handlePointerDown =
|
|
133
|
+
const handlePointerDown = (event) => {
|
|
137
134
|
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
138
135
|
let handleAndDispatchPointerDownOutsideEvent = function() {
|
|
139
136
|
handleAndDispatchCustomEvent(POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { discrete: true });
|
|
140
137
|
};
|
|
141
|
-
__name(handleAndDispatchPointerDownOutsideEvent, "handleAndDispatchPointerDownOutsideEvent");
|
|
142
138
|
const eventDetail = { originalEvent: event };
|
|
143
139
|
if (event.pointerType === "touch") {
|
|
144
140
|
document.removeEventListener("click", handleClickRef.current);
|
|
@@ -149,7 +145,7 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
149
145
|
}
|
|
150
146
|
}
|
|
151
147
|
isPointerInsideReactTreeRef.current = false;
|
|
152
|
-
}
|
|
148
|
+
};
|
|
153
149
|
const timerId = window.setTimeout(() => {
|
|
154
150
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
155
151
|
}, 0);
|
|
@@ -163,19 +159,18 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
163
159
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
164
160
|
};
|
|
165
161
|
}
|
|
166
|
-
__name(usePointerDownOutside, "usePointerDownOutside");
|
|
167
162
|
function useFocusOutside(onFocusOutside) {
|
|
168
163
|
const handleFocusOutside = useCallbackRef(onFocusOutside);
|
|
169
164
|
const isFocusInsideReactTreeRef = React.useRef(false);
|
|
170
165
|
React.useEffect(() => {
|
|
171
|
-
const handleFocus =
|
|
166
|
+
const handleFocus = (event) => {
|
|
172
167
|
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
173
168
|
const eventDetail = { originalEvent: event };
|
|
174
169
|
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
175
170
|
discrete: false
|
|
176
171
|
});
|
|
177
172
|
}
|
|
178
|
-
}
|
|
173
|
+
};
|
|
179
174
|
document.addEventListener("focusin", handleFocus);
|
|
180
175
|
return () => document.removeEventListener("focusin", handleFocus);
|
|
181
176
|
}, [handleFocusOutside]);
|
|
@@ -184,12 +179,10 @@ function useFocusOutside(onFocusOutside) {
|
|
|
184
179
|
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
185
180
|
};
|
|
186
181
|
}
|
|
187
|
-
__name(useFocusOutside, "useFocusOutside");
|
|
188
182
|
function dispatchUpdate() {
|
|
189
183
|
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
190
184
|
document.dispatchEvent(event);
|
|
191
185
|
}
|
|
192
|
-
__name(dispatchUpdate, "dispatchUpdate");
|
|
193
186
|
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
194
187
|
const target = detail.originalEvent.target;
|
|
195
188
|
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
@@ -201,7 +194,6 @@ function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
|
201
194
|
target.dispatchEvent(event);
|
|
202
195
|
}
|
|
203
196
|
}
|
|
204
|
-
__name(handleAndDispatchCustomEvent, "handleAndDispatchCustomEvent");
|
|
205
197
|
const Root = Dismissable;
|
|
206
198
|
const Branch = DismissableBranch;
|
|
207
199
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/dismissable",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.73",
|
|
4
4
|
"sideEffects": true,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -21,15 +21,15 @@
|
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@radix-ui/react-use-callback-ref": "^0.1.0",
|
|
23
23
|
"@radix-ui/react-use-escape-keydown": "^0.1.0",
|
|
24
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
25
|
-
"@tamagui/core": "^1.0.1-beta.
|
|
24
|
+
"@tamagui/compose-refs": "^1.0.1-beta.73",
|
|
25
|
+
"@tamagui/core": "^1.0.1-beta.73"
|
|
26
26
|
},
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"react": "*",
|
|
29
29
|
"react-dom": "*"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
32
|
+
"@tamagui/build": "^1.0.1-beta.73",
|
|
33
33
|
"react": "*",
|
|
34
34
|
"react-dom": "*"
|
|
35
35
|
},
|
package/types/Dismissable.d.ts
CHANGED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
package/types/index.d.ts
CHANGED
|
File without changes
|
package/types/index.d.ts.map
CHANGED
|
File without changes
|