@tamagui/dismissable 1.1.7 → 1.1.9
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
CHANGED
|
@@ -18,6 +18,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
18
18
|
return to;
|
|
19
19
|
};
|
|
20
20
|
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
21
25
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
26
|
mod
|
|
23
27
|
));
|
|
@@ -145,27 +149,34 @@ const Dismissable = React.forwardRef(
|
|
|
145
149
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
146
150
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
147
151
|
}, []);
|
|
148
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
153
|
+
"div",
|
|
154
|
+
{
|
|
155
|
+
...layerProps,
|
|
156
|
+
ref: composedRefs,
|
|
157
|
+
style: {
|
|
158
|
+
display: "contents",
|
|
159
|
+
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
160
|
+
// @ts-ignore
|
|
161
|
+
...props.style
|
|
162
|
+
},
|
|
163
|
+
onFocusCapture: (0, import_core.composeEventHandlers)(
|
|
164
|
+
// @ts-ignore
|
|
165
|
+
props.onFocusCapture,
|
|
166
|
+
focusOutside.onFocusCapture
|
|
167
|
+
),
|
|
168
|
+
onBlurCapture: (0, import_core.composeEventHandlers)(
|
|
169
|
+
// @ts-ignore
|
|
170
|
+
props.onBlurCapture,
|
|
171
|
+
focusOutside.onBlurCapture
|
|
172
|
+
),
|
|
173
|
+
onPointerDownCapture: (0, import_core.composeEventHandlers)(
|
|
174
|
+
// @ts-ignore
|
|
175
|
+
props.onPointerDownCapture,
|
|
176
|
+
pointerDownOutside.onPointerDownCapture
|
|
177
|
+
)
|
|
178
|
+
}
|
|
179
|
+
);
|
|
169
180
|
}
|
|
170
181
|
);
|
|
171
182
|
Dismissable.displayName = DISMISSABLE_LAYER_NAME;
|
|
@@ -184,11 +195,7 @@ const DismissableBranch = React.forwardRef(
|
|
|
184
195
|
};
|
|
185
196
|
}
|
|
186
197
|
}, [context.branches]);
|
|
187
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
|
188
|
-
style: { display: "contents" },
|
|
189
|
-
...props,
|
|
190
|
-
ref: composedRefs
|
|
191
|
-
});
|
|
198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "contents" }, ...props, ref: composedRefs });
|
|
192
199
|
}
|
|
193
200
|
);
|
|
194
201
|
DismissableBranch.displayName = BRANCH_NAME;
|
|
@@ -230,6 +237,7 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
230
237
|
};
|
|
231
238
|
}, [handlePointerDownOutside]);
|
|
232
239
|
return {
|
|
240
|
+
// ensures we check React component tree (not just DOM tree)
|
|
233
241
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
234
242
|
};
|
|
235
243
|
}
|
|
@@ -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 { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport { useEvent } from '@tamagui/use-event'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(\n target: E['target'],\n event: E\n) {\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>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n forceUnmount,\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\n const [highestLayerWithOutsidePointerEventsDisabled] = [\n ...context.layersWithOutsidePointerEventsDisabled,\n ].slice(-1)\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(\n highestLayerWithOutsidePointerEventsDisabled\n )\n\n const index = node ? layers.indexOf(node) : -1\n const isBodyPointerEventsDisabled =\n context.layersWithOutsidePointerEventsDisabled.size > 0\n const isPointerEventsEnabled =\n index >= highestLayerWithOutsidePointerEventsDisabledIndex\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLDivElement\n const isPointerDownOnBranch = [...context.branches].some((branch) =>\n branch.contains(target)\n )\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) =>\n branch.contains(target)\n )\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 if (forceUnmount) return\n return () => {\n if (!node) return\n context.layers.delete(node)\n context.layersWithOutsidePointerEventsDisabled.delete(node)\n dispatchUpdate()\n }\n }, [node, context, forceUnmount])\n\n React.useEffect(() => {\n const handleUpdate = () => {\n force({})\n }\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)\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(\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n) {\n const handlePointerDownOutside = useEvent(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 = 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 = useEvent(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\nexport { Dismissable, DismissableBranch }\n\nexport type { DismissableProps }\n"],
|
|
5
|
-
"mappings": "
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["node", "handleAndDispatchPointerDownOutsideEvent"]
|
|
7
7
|
}
|
package/dist/esm/Dismissable.js
CHANGED
|
@@ -115,27 +115,34 @@ const Dismissable = React.forwardRef(
|
|
|
115
115
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
116
116
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
117
117
|
}, []);
|
|
118
|
-
return /* @__PURE__ */ jsx(
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
118
|
+
return /* @__PURE__ */ jsx(
|
|
119
|
+
"div",
|
|
120
|
+
{
|
|
121
|
+
...layerProps,
|
|
122
|
+
ref: composedRefs,
|
|
123
|
+
style: {
|
|
124
|
+
display: "contents",
|
|
125
|
+
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
126
|
+
// @ts-ignore
|
|
127
|
+
...props.style
|
|
128
|
+
},
|
|
129
|
+
onFocusCapture: composeEventHandlers(
|
|
130
|
+
// @ts-ignore
|
|
131
|
+
props.onFocusCapture,
|
|
132
|
+
focusOutside.onFocusCapture
|
|
133
|
+
),
|
|
134
|
+
onBlurCapture: composeEventHandlers(
|
|
135
|
+
// @ts-ignore
|
|
136
|
+
props.onBlurCapture,
|
|
137
|
+
focusOutside.onBlurCapture
|
|
138
|
+
),
|
|
139
|
+
onPointerDownCapture: composeEventHandlers(
|
|
140
|
+
// @ts-ignore
|
|
141
|
+
props.onPointerDownCapture,
|
|
142
|
+
pointerDownOutside.onPointerDownCapture
|
|
143
|
+
)
|
|
144
|
+
}
|
|
145
|
+
);
|
|
139
146
|
}
|
|
140
147
|
);
|
|
141
148
|
Dismissable.displayName = DISMISSABLE_LAYER_NAME;
|
|
@@ -154,11 +161,7 @@ const DismissableBranch = React.forwardRef(
|
|
|
154
161
|
};
|
|
155
162
|
}
|
|
156
163
|
}, [context.branches]);
|
|
157
|
-
return /* @__PURE__ */ jsx("div", {
|
|
158
|
-
style: { display: "contents" },
|
|
159
|
-
...props,
|
|
160
|
-
ref: composedRefs
|
|
161
|
-
});
|
|
164
|
+
return /* @__PURE__ */ jsx("div", { style: { display: "contents" }, ...props, ref: composedRefs });
|
|
162
165
|
}
|
|
163
166
|
);
|
|
164
167
|
DismissableBranch.displayName = BRANCH_NAME;
|
|
@@ -200,6 +203,7 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
200
203
|
};
|
|
201
204
|
}, [handlePointerDownOutside]);
|
|
202
205
|
return {
|
|
206
|
+
// ensures we check React component tree (not just DOM tree)
|
|
203
207
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
204
208
|
};
|
|
205
209
|
}
|
|
@@ -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 { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport { useEvent } from '@tamagui/use-event'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(\n target: E['target'],\n event: E\n) {\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>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n forceUnmount,\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\n const [highestLayerWithOutsidePointerEventsDisabled] = [\n ...context.layersWithOutsidePointerEventsDisabled,\n ].slice(-1)\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(\n highestLayerWithOutsidePointerEventsDisabled\n )\n\n const index = node ? layers.indexOf(node) : -1\n const isBodyPointerEventsDisabled =\n context.layersWithOutsidePointerEventsDisabled.size > 0\n const isPointerEventsEnabled =\n index >= highestLayerWithOutsidePointerEventsDisabledIndex\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLDivElement\n const isPointerDownOnBranch = [...context.branches].some((branch) =>\n branch.contains(target)\n )\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) =>\n branch.contains(target)\n )\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 if (forceUnmount) return\n return () => {\n if (!node) return\n context.layers.delete(node)\n context.layersWithOutsidePointerEventsDisabled.delete(node)\n dispatchUpdate()\n }\n }, [node, context, forceUnmount])\n\n React.useEffect(() => {\n const handleUpdate = () => {\n force({})\n }\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)\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(\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n) {\n const handlePointerDownOutside = useEvent(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 = 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 = useEvent(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\nexport { Dismissable, DismissableBranch }\n\nexport type { DismissableProps }\n"],
|
|
5
|
-
"mappings": "AAiJM;AA9IN,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,YAAY,cAAc;AAI1B,SAAS,4BACP,QACA,OACA;AACA,MAAI;AAAQ,aAAS,UAAU,MAAM,OAAO,cAAc,KAAK,CAAC;AAClE;AAMA,MAAM,yBAAyB;AAC/B,MAAM,iBAAiB;AACvB,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAEtB,IAAI;AAEJ,MAAM,qBAAqB,MAAM,cAAc;AAAA,EAC7C,QAAQ,oBAAI,IAAoB;AAAA,EAChC,wCAAwC,oBAAI,IAAoB;AAAA,EAChE,UAAU,oBAAI,IAAoB;AACpC,CAAC;AAED,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,8BAA8B;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["node", "handleAndDispatchPointerDownOutsideEvent"]
|
|
7
7
|
}
|
package/dist/jsx/Dismissable.js
CHANGED
|
@@ -114,20 +114,31 @@ const Dismissable = React.forwardRef(
|
|
|
114
114
|
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
115
115
|
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
116
116
|
}, []);
|
|
117
|
-
return <div
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
117
|
+
return <div
|
|
118
|
+
{...layerProps}
|
|
119
|
+
ref={composedRefs}
|
|
120
|
+
style={{
|
|
121
|
+
display: "contents",
|
|
122
|
+
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
123
|
+
// @ts-ignore
|
|
124
|
+
...props.style
|
|
125
|
+
}}
|
|
126
|
+
onFocusCapture={composeEventHandlers(
|
|
127
|
+
// @ts-ignore
|
|
128
|
+
props.onFocusCapture,
|
|
129
|
+
focusOutside.onFocusCapture
|
|
130
|
+
)}
|
|
131
|
+
onBlurCapture={composeEventHandlers(
|
|
132
|
+
// @ts-ignore
|
|
133
|
+
props.onBlurCapture,
|
|
134
|
+
focusOutside.onBlurCapture
|
|
135
|
+
)}
|
|
136
|
+
onPointerDownCapture={composeEventHandlers(
|
|
137
|
+
// @ts-ignore
|
|
138
|
+
props.onPointerDownCapture,
|
|
139
|
+
pointerDownOutside.onPointerDownCapture
|
|
140
|
+
)}
|
|
141
|
+
/>;
|
|
131
142
|
}
|
|
132
143
|
);
|
|
133
144
|
Dismissable.displayName = DISMISSABLE_LAYER_NAME;
|
|
@@ -188,6 +199,7 @@ function usePointerDownOutside(onPointerDownOutside) {
|
|
|
188
199
|
};
|
|
189
200
|
}, [handlePointerDownOutside]);
|
|
190
201
|
return {
|
|
202
|
+
// ensures we check React component tree (not just DOM tree)
|
|
191
203
|
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
192
204
|
};
|
|
193
205
|
}
|
|
@@ -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 { useEscapeKeydown } from '@radix-ui/react-use-escape-keydown'\nimport { useComposedRefs } from '@tamagui/compose-refs'\nimport { composeEventHandlers } from '@tamagui/core'\nimport { useEvent } from '@tamagui/use-event'\nimport * as React from 'react'\nimport * as ReactDOM from 'react-dom'\n\nimport { DismissableBranchProps, DismissableProps } from './DismissableProps'\n\nfunction dispatchDiscreteCustomEvent<E extends CustomEvent>(\n target: E['target'],\n event: E\n) {\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>(\n (props, forwardedRef) => {\n const {\n disableOutsidePointerEvents = false,\n forceUnmount,\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\n const [highestLayerWithOutsidePointerEventsDisabled] = [\n ...context.layersWithOutsidePointerEventsDisabled,\n ].slice(-1)\n const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(\n highestLayerWithOutsidePointerEventsDisabled\n )\n\n const index = node ? layers.indexOf(node) : -1\n const isBodyPointerEventsDisabled =\n context.layersWithOutsidePointerEventsDisabled.size > 0\n const isPointerEventsEnabled =\n index >= highestLayerWithOutsidePointerEventsDisabledIndex\n\n const pointerDownOutside = usePointerDownOutside((event) => {\n const target = event.target as HTMLDivElement\n const isPointerDownOnBranch = [...context.branches].some((branch) =>\n branch.contains(target)\n )\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) =>\n branch.contains(target)\n )\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 if (forceUnmount) return\n return () => {\n if (!node) return\n context.layers.delete(node)\n context.layersWithOutsidePointerEventsDisabled.delete(node)\n dispatchUpdate()\n }\n }, [node, context, forceUnmount])\n\n React.useEffect(() => {\n const handleUpdate = () => {\n force({})\n }\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)\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(\n onPointerDownOutside?: (event: PointerDownOutsideEvent) => void\n) {\n const handlePointerDownOutside = useEvent(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 = 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 = useEvent(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\nexport { Dismissable, DismissableBranch }\n\nexport type { DismissableProps }\n"],
|
|
5
|
-
"mappings": "AAGA,SAAS,wBAAwB;AACjC,SAAS,uBAAuB;AAChC,SAAS,4BAA4B;AACrC,SAAS,gBAAgB;AACzB,YAAY,WAAW;AACvB,YAAY,cAAc;AAI1B,SAAS,4BACP,QACA,OACA;AACA,MAAI;AAAQ,aAAS,UAAU,MAAM,OAAO,cAAc,KAAK,CAAC;AAClE;AAMA,MAAM,yBAAyB;AAC/B,MAAM,iBAAiB;AACvB,MAAM,uBAAuB;AAC7B,MAAM,gBAAgB;AAEtB,IAAI;AAEJ,MAAM,qBAAqB,MAAM,cAAc;AAAA,EAC7C,QAAQ,oBAAI,IAAoB;AAAA,EAChC,wCAAwC,oBAAI,IAAoB;AAAA,EAChE,UAAU,oBAAI,IAAoB;AACpC,CAAC;AAED,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ,8BAA8B;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["node", "handleAndDispatchPointerDownOutsideEvent"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/dismissable",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
4
4
|
"sideEffects": true,
|
|
5
5
|
"source": "src/index.ts",
|
|
6
6
|
"types": "./types/index.d.ts",
|
|
@@ -22,16 +22,16 @@
|
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@radix-ui/react-use-escape-keydown": "^0.1.0",
|
|
25
|
-
"@tamagui/compose-refs": "^1.1.
|
|
26
|
-
"@tamagui/core": "^1.1.
|
|
27
|
-
"@tamagui/use-event": "^1.1.
|
|
25
|
+
"@tamagui/compose-refs": "^1.1.9",
|
|
26
|
+
"@tamagui/core": "^1.1.9",
|
|
27
|
+
"@tamagui/use-event": "^1.1.9"
|
|
28
28
|
},
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"react": "*",
|
|
31
31
|
"react-dom": "*"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
|
-
"@tamagui/build": "^1.1.
|
|
34
|
+
"@tamagui/build": "^1.1.9",
|
|
35
35
|
"react": "^18.2.0",
|
|
36
36
|
"react-dom": "^18.2.0"
|
|
37
37
|
},
|