react-aria
Version:
Spectrum UI components in React
107 lines (99 loc) • 5.82 kB
JavaScript
import {getEventTarget as $23f2114a1b82827e$export$e58f029f0fbfdb29, nodeContains as $23f2114a1b82827e$export$4282f70798064fe0} from "../utils/shadowdom/DOMFunctions.mjs";
import {getOwnerDocument as $d447af545b77c9f1$export$b204af158042fbac} from "../utils/domHelpers.mjs";
import {useEffectEvent as $fe16bffc7a557bf0$export$7f54fc3180508a52} from "../utils/useEffectEvent.mjs";
import {useRef as $a2uwp$useRef, useEffect as $a2uwp$useEffect} from "react";
/*
* Copyright 2020 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/ // Portions of the code in this file are based on code from react.
// Original licensing for the following can be found in the
// NOTICE file in the root directory of this source tree.
// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
function $e260d131964da0f9$export$872b660ac5a1ff98(props) {
let { ref: ref, onInteractOutside: onInteractOutside, isDisabled: isDisabled, onInteractOutsideStart: onInteractOutsideStart } = props;
let stateRef = (0, $a2uwp$useRef)({
isPointerDown: false,
ignoreEmulatedMouseEvents: false
});
let onPointerDown = (0, $fe16bffc7a557bf0$export$7f54fc3180508a52)((e)=>{
if (onInteractOutside && $e260d131964da0f9$var$isValidEvent(e, ref)) {
if (onInteractOutsideStart) onInteractOutsideStart(e);
stateRef.current.isPointerDown = true;
}
});
let triggerInteractOutside = (0, $fe16bffc7a557bf0$export$7f54fc3180508a52)((e)=>{
if (onInteractOutside) onInteractOutside(e);
});
(0, $a2uwp$useEffect)(()=>{
let state = stateRef.current;
if (isDisabled) return;
const element = ref.current;
const documentObject = (0, $d447af545b77c9f1$export$b204af158042fbac)(element);
// Use pointer events if available. Otherwise, fall back to mouse and touch events.
if (typeof PointerEvent !== 'undefined') {
let onClick = (e)=>{
if (state.isPointerDown && $e260d131964da0f9$var$isValidEvent(e, ref)) triggerInteractOutside(e);
state.isPointerDown = false;
};
// changing these to capture phase fixed combobox
// Use click instead of pointerup to avoid Android Chrome issue
// https://issues.chromium.org/issues/40732224
documentObject.addEventListener('pointerdown', onPointerDown, true);
documentObject.addEventListener('click', onClick, true);
return ()=>{
documentObject.removeEventListener('pointerdown', onPointerDown, true);
documentObject.removeEventListener('click', onClick, true);
};
} else if (process.env.NODE_ENV === 'test') {
let onMouseUp = (e)=>{
if (state.ignoreEmulatedMouseEvents) state.ignoreEmulatedMouseEvents = false;
else if (state.isPointerDown && $e260d131964da0f9$var$isValidEvent(e, ref)) triggerInteractOutside(e);
state.isPointerDown = false;
};
let onTouchEnd = (e)=>{
state.ignoreEmulatedMouseEvents = true;
if (state.isPointerDown && $e260d131964da0f9$var$isValidEvent(e, ref)) triggerInteractOutside(e);
state.isPointerDown = false;
};
documentObject.addEventListener('mousedown', onPointerDown, true);
documentObject.addEventListener('mouseup', onMouseUp, true);
documentObject.addEventListener('touchstart', onPointerDown, true);
documentObject.addEventListener('touchend', onTouchEnd, true);
return ()=>{
documentObject.removeEventListener('mousedown', onPointerDown, true);
documentObject.removeEventListener('mouseup', onMouseUp, true);
documentObject.removeEventListener('touchstart', onPointerDown, true);
documentObject.removeEventListener('touchend', onTouchEnd, true);
};
}
}, [
ref,
isDisabled
]);
}
function $e260d131964da0f9$var$isValidEvent(event, ref) {
if (event.button > 0) return false;
let target = (0, $23f2114a1b82827e$export$e58f029f0fbfdb29)(event);
if (target) {
// if the event target is no longer in the document, ignore
const ownerDocument = target.ownerDocument;
if (!ownerDocument || !(0, $23f2114a1b82827e$export$4282f70798064fe0)(ownerDocument.documentElement, target)) return false;
// If the target is within a top layer element (e.g. toasts), ignore.
if (target.closest('[data-react-aria-top-layer]')) return false;
}
if (!ref.current) return false;
// When the event source is inside a Shadow DOM, event.target is just the shadow root.
// Using event.composedPath instead means we can get the actual element inside the shadow root.
// This only works if the shadow root is open, there is no way to detect if it is closed.
// If the event composed path contains the ref, interaction is inside.
return !event.composedPath().includes(ref.current);
}
export {$e260d131964da0f9$export$872b660ac5a1ff98 as useInteractOutside};
//# sourceMappingURL=useInteractOutside.mjs.map