@react-aria/interactions 3.23.0 → 3.24.1

package/dist/useFocusable.mjs

@@ -0,0 +1,100 @@
+import {focusSafely as $3ad3f6e1647bc98d$export$80f3e147d781571c} from "./focusSafely.mjs";
+import {useFocus as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6} from "./useFocus.mjs";
+import {useKeyboard as $46d819fcbaf35654$export$8f71654801c2f7cd} from "./useKeyboard.mjs";
+import {useSyncRef as $fcPuG$useSyncRef, useObjectRef as $fcPuG$useObjectRef, mergeProps as $fcPuG$mergeProps, getOwnerWindow as $fcPuG$getOwnerWindow, isFocusable as $fcPuG$isFocusable, mergeRefs as $fcPuG$mergeRefs} from "@react-aria/utils";
+import $fcPuG$react, {useContext as $fcPuG$useContext, useRef as $fcPuG$useRef, useEffect as $fcPuG$useEffect, forwardRef as $fcPuG$forwardRef} 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.
+ */ 
+
+
+
+
+let $f645667febf57a63$export$f9762fab77588ecb = /*#__PURE__*/ (0, $fcPuG$react).createContext(null);
+function $f645667febf57a63$var$useFocusableContext(ref) {
+    let context = (0, $fcPuG$useContext)($f645667febf57a63$export$f9762fab77588ecb) || {};
+    (0, $fcPuG$useSyncRef)(context, ref);
+    // eslint-disable-next-line
+    let { ref: _, ...otherProps } = context;
+    return otherProps;
+}
+const $f645667febf57a63$export$13f3202a3e5ddd5 = /*#__PURE__*/ (0, $fcPuG$react).forwardRef(function FocusableProvider(props, ref) {
+    let { children: children, ...otherProps } = props;
+    let objRef = (0, $fcPuG$useObjectRef)(ref);
+    let context = {
+        ...otherProps,
+        ref: objRef
+    };
+    return /*#__PURE__*/ (0, $fcPuG$react).createElement($f645667febf57a63$export$f9762fab77588ecb.Provider, {
+        value: context
+    }, children);
+});
+function $f645667febf57a63$export$4c014de7c8940b4c(props, domRef) {
+    let { focusProps: focusProps } = (0, $a1ea59d68270f0dd$export$f8168d8dd8fd66e6)(props);
+    let { keyboardProps: keyboardProps } = (0, $46d819fcbaf35654$export$8f71654801c2f7cd)(props);
+    let interactions = (0, $fcPuG$mergeProps)(focusProps, keyboardProps);
+    let domProps = $f645667febf57a63$var$useFocusableContext(domRef);
+    let interactionProps = props.isDisabled ? {} : domProps;
+    let autoFocusRef = (0, $fcPuG$useRef)(props.autoFocus);
+    (0, $fcPuG$useEffect)(()=>{
+        if (autoFocusRef.current && domRef.current) (0, $3ad3f6e1647bc98d$export$80f3e147d781571c)(domRef.current);
+        autoFocusRef.current = false;
+    }, [
+        domRef
+    ]);
+    // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
+    let tabIndex = props.excludeFromTabOrder ? -1 : 0;
+    if (props.isDisabled) tabIndex = undefined;
+    return {
+        focusableProps: (0, $fcPuG$mergeProps)({
+            ...interactions,
+            tabIndex: tabIndex
+        }, interactionProps)
+    };
+}
+const $f645667febf57a63$export$35a3bebf7ef2d934 = /*#__PURE__*/ (0, $fcPuG$forwardRef)(({ children: children, ...props }, ref)=>{
+    ref = (0, $fcPuG$useObjectRef)(ref);
+    let { focusableProps: focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c(props, ref);
+    let child = (0, $fcPuG$react).Children.only(children);
+    (0, $fcPuG$useEffect)(()=>{
+        let el = ref.current;
+        if (!el || !(el instanceof (0, $fcPuG$getOwnerWindow)(el).Element)) {
+            console.error('<Focusable> child must forward its ref to a DOM element.');
+            return;
+        }
+        if (!props.isDisabled && !(0, $fcPuG$isFocusable)(el)) {
+            console.warn('<Focusable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+            return;
+        }
+        if (el.localName !== 'button' && el.localName !== 'input' && el.localName !== 'select' && el.localName !== 'textarea' && el.localName !== 'a' && el.localName !== 'area' && el.localName !== 'summary' && el.localName !== 'img' && el.localName !== 'svg') {
+            let role = el.getAttribute('role');
+            if (!role) console.warn('<Focusable> child must have an interactive ARIA role.');
+            else if (// https://w3c.github.io/aria/#widget_roles
+            role !== 'application' && role !== 'button' && role !== 'checkbox' && role !== 'combobox' && role !== 'gridcell' && role !== 'link' && role !== 'menuitem' && role !== 'menuitemcheckbox' && role !== 'menuitemradio' && role !== 'option' && role !== 'radio' && role !== 'searchbox' && role !== 'separator' && role !== 'slider' && role !== 'spinbutton' && role !== 'switch' && role !== 'tab' && role !== 'tabpanel' && role !== 'textbox' && role !== 'treeitem' && // aria-describedby is also announced on these roles
+            role !== 'img' && role !== 'meter' && role !== 'progressbar') console.warn(`<Focusable> child must have an interactive ARIA role. Got "${role}".`);
+        }
+    }, [
+        ref,
+        props.isDisabled
+    ]);
+    // @ts-ignore
+    let childRef = parseInt((0, $fcPuG$react).version, 10) < 19 ? child.ref : child.props.ref;
+    return /*#__PURE__*/ (0, $fcPuG$react).cloneElement(child, {
+        ...(0, $fcPuG$mergeProps)(focusableProps, child.props),
+        // @ts-ignore
+        ref: (0, $fcPuG$mergeRefs)(childRef, ref)
+    });
+});
+
+
+export {$f645667febf57a63$export$f9762fab77588ecb as FocusableContext, $f645667febf57a63$export$13f3202a3e5ddd5 as FocusableProvider, $f645667febf57a63$export$4c014de7c8940b4c as useFocusable, $f645667febf57a63$export$35a3bebf7ef2d934 as Focusable};
+//# sourceMappingURL=useFocusable.module.js.map

package/dist/useFocusable.module.js

@@ -0,0 +1,100 @@
+import {focusSafely as $3ad3f6e1647bc98d$export$80f3e147d781571c} from "./focusSafely.module.js";
+import {useFocus as $a1ea59d68270f0dd$export$f8168d8dd8fd66e6} from "./useFocus.module.js";
+import {useKeyboard as $46d819fcbaf35654$export$8f71654801c2f7cd} from "./useKeyboard.module.js";
+import {useSyncRef as $fcPuG$useSyncRef, useObjectRef as $fcPuG$useObjectRef, mergeProps as $fcPuG$mergeProps, getOwnerWindow as $fcPuG$getOwnerWindow, isFocusable as $fcPuG$isFocusable, mergeRefs as $fcPuG$mergeRefs} from "@react-aria/utils";
+import $fcPuG$react, {useContext as $fcPuG$useContext, useRef as $fcPuG$useRef, useEffect as $fcPuG$useEffect, forwardRef as $fcPuG$forwardRef} 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.
+ */ 
+
+
+
+
+let $f645667febf57a63$export$f9762fab77588ecb = /*#__PURE__*/ (0, $fcPuG$react).createContext(null);
+function $f645667febf57a63$var$useFocusableContext(ref) {
+    let context = (0, $fcPuG$useContext)($f645667febf57a63$export$f9762fab77588ecb) || {};
+    (0, $fcPuG$useSyncRef)(context, ref);
+    // eslint-disable-next-line
+    let { ref: _, ...otherProps } = context;
+    return otherProps;
+}
+const $f645667febf57a63$export$13f3202a3e5ddd5 = /*#__PURE__*/ (0, $fcPuG$react).forwardRef(function FocusableProvider(props, ref) {
+    let { children: children, ...otherProps } = props;
+    let objRef = (0, $fcPuG$useObjectRef)(ref);
+    let context = {
+        ...otherProps,
+        ref: objRef
+    };
+    return /*#__PURE__*/ (0, $fcPuG$react).createElement($f645667febf57a63$export$f9762fab77588ecb.Provider, {
+        value: context
+    }, children);
+});
+function $f645667febf57a63$export$4c014de7c8940b4c(props, domRef) {
+    let { focusProps: focusProps } = (0, $a1ea59d68270f0dd$export$f8168d8dd8fd66e6)(props);
+    let { keyboardProps: keyboardProps } = (0, $46d819fcbaf35654$export$8f71654801c2f7cd)(props);
+    let interactions = (0, $fcPuG$mergeProps)(focusProps, keyboardProps);
+    let domProps = $f645667febf57a63$var$useFocusableContext(domRef);
+    let interactionProps = props.isDisabled ? {} : domProps;
+    let autoFocusRef = (0, $fcPuG$useRef)(props.autoFocus);
+    (0, $fcPuG$useEffect)(()=>{
+        if (autoFocusRef.current && domRef.current) (0, $3ad3f6e1647bc98d$export$80f3e147d781571c)(domRef.current);
+        autoFocusRef.current = false;
+    }, [
+        domRef
+    ]);
+    // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
+    let tabIndex = props.excludeFromTabOrder ? -1 : 0;
+    if (props.isDisabled) tabIndex = undefined;
+    return {
+        focusableProps: (0, $fcPuG$mergeProps)({
+            ...interactions,
+            tabIndex: tabIndex
+        }, interactionProps)
+    };
+}
+const $f645667febf57a63$export$35a3bebf7ef2d934 = /*#__PURE__*/ (0, $fcPuG$forwardRef)(({ children: children, ...props }, ref)=>{
+    ref = (0, $fcPuG$useObjectRef)(ref);
+    let { focusableProps: focusableProps } = $f645667febf57a63$export$4c014de7c8940b4c(props, ref);
+    let child = (0, $fcPuG$react).Children.only(children);
+    (0, $fcPuG$useEffect)(()=>{
+        let el = ref.current;
+        if (!el || !(el instanceof (0, $fcPuG$getOwnerWindow)(el).Element)) {
+            console.error('<Focusable> child must forward its ref to a DOM element.');
+            return;
+        }
+        if (!props.isDisabled && !(0, $fcPuG$isFocusable)(el)) {
+            console.warn('<Focusable> child must be focusable. Please ensure the tabIndex prop is passed through.');
+            return;
+        }
+        if (el.localName !== 'button' && el.localName !== 'input' && el.localName !== 'select' && el.localName !== 'textarea' && el.localName !== 'a' && el.localName !== 'area' && el.localName !== 'summary' && el.localName !== 'img' && el.localName !== 'svg') {
+            let role = el.getAttribute('role');
+            if (!role) console.warn('<Focusable> child must have an interactive ARIA role.');
+            else if (// https://w3c.github.io/aria/#widget_roles
+            role !== 'application' && role !== 'button' && role !== 'checkbox' && role !== 'combobox' && role !== 'gridcell' && role !== 'link' && role !== 'menuitem' && role !== 'menuitemcheckbox' && role !== 'menuitemradio' && role !== 'option' && role !== 'radio' && role !== 'searchbox' && role !== 'separator' && role !== 'slider' && role !== 'spinbutton' && role !== 'switch' && role !== 'tab' && role !== 'tabpanel' && role !== 'textbox' && role !== 'treeitem' && // aria-describedby is also announced on these roles
+            role !== 'img' && role !== 'meter' && role !== 'progressbar') console.warn(`<Focusable> child must have an interactive ARIA role. Got "${role}".`);
+        }
+    }, [
+        ref,
+        props.isDisabled
+    ]);
+    // @ts-ignore
+    let childRef = parseInt((0, $fcPuG$react).version, 10) < 19 ? child.ref : child.props.ref;
+    return /*#__PURE__*/ (0, $fcPuG$react).cloneElement(child, {
+        ...(0, $fcPuG$mergeProps)(focusableProps, child.props),
+        // @ts-ignore
+        ref: (0, $fcPuG$mergeRefs)(childRef, ref)
+    });
+});
+
+
+export {$f645667febf57a63$export$f9762fab77588ecb as FocusableContext, $f645667febf57a63$export$13f3202a3e5ddd5 as FocusableProvider, $f645667febf57a63$export$4c014de7c8940b4c as useFocusable, $f645667febf57a63$export$35a3bebf7ef2d934 as Focusable};
+//# sourceMappingURL=useFocusable.module.js.map

package/dist/useFocusable.module.js.map

@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/@react-aria/interactions/src/useFocusable.tsx"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps, RefObject} from '@react-types/shared';\nimport {focusSafely} from './';\nimport {getOwnerWindow, isFocusable, mergeProps, mergeRefs, useObjectRef, useSyncRef} from '@react-aria/utils';\nimport React, {ForwardedRef, forwardRef, MutableRefObject, ReactElement, ReactNode, useContext, useEffect, useRef} from 'react';\nimport {useFocus} from './useFocus';\nimport {useKeyboard} from './useKeyboard';\n\nexport interface FocusableOptions<T = FocusableElement> extends FocusableProps<T>, FocusableDOMProps {\n  /** Whether focus should be disabled. */\n  isDisabled?: boolean\n}\n\nexport interface FocusableProviderProps extends DOMAttributes {\n  /** The child element to provide DOM props to. */\n  children?: ReactNode\n}\n\ninterface FocusableContextValue extends FocusableProviderProps {\n  ref?: MutableRefObject<FocusableElement | null>\n}\n\n// Exported for @react-aria/collections, which forwards this context.\n/** @private */\nexport let FocusableContext = React.createContext<FocusableContextValue | null>(null);\n\nfunction useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {\n  let context = useContext(FocusableContext) || {};\n  useSyncRef(context, ref);\n\n  // eslint-disable-next-line\n  let {ref: _, ...otherProps} = context;\n  return otherProps;\n}\n\n/**\n * Provides DOM props to the nearest focusable child.\n */\nexport const FocusableProvider = React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {\n  let {children, ...otherProps} = props;\n  let objRef = useObjectRef(ref);\n  let context = {\n    ...otherProps,\n    ref: objRef\n  };\n\n  return (\n    <FocusableContext.Provider value={context}>\n      {children}\n    </FocusableContext.Provider>\n  );\n});\n\nexport interface FocusableAria {\n  /** Props for the focusable element. */\n  focusableProps: DOMAttributes\n}\n\n/**\n * Used to make an element focusable and capable of auto focus.\n */\nexport function useFocusable<T extends FocusableElement = FocusableElement>(props: FocusableOptions<T>, domRef: RefObject<FocusableElement | null>): FocusableAria {\n  let {focusProps} = useFocus(props);\n  let {keyboardProps} = useKeyboard(props);\n  let interactions = mergeProps(focusProps, keyboardProps);\n  let domProps = useFocusableContext(domRef);\n  let interactionProps = props.isDisabled ? {} : domProps;\n  let autoFocusRef = useRef(props.autoFocus);\n\n  useEffect(() => {\n    if (autoFocusRef.current && domRef.current) {\n      focusSafely(domRef.current);\n    }\n    autoFocusRef.current = false;\n  }, [domRef]);\n\n  // Always set a tabIndex so that Safari allows focusing native buttons and inputs.\n  let tabIndex: number | undefined = props.excludeFromTabOrder ? -1 : 0;\n  if (props.isDisabled) {\n    tabIndex = undefined;\n  }\n\n  return {\n    focusableProps: mergeProps(\n      {\n        ...interactions,\n        tabIndex\n      },\n      interactionProps\n    )\n  };\n}\n\nexport interface FocusableComponentProps extends FocusableOptions {\n  children: ReactElement<DOMAttributes, string>\n}\n\nexport const Focusable = forwardRef(({children, ...props}: FocusableComponentProps, ref: ForwardedRef<FocusableElement>) => {\n  ref = useObjectRef(ref);\n  let {focusableProps} = useFocusable(props, ref);\n  let child = React.Children.only(children);\n\n  useEffect(() => {\n    let el = ref.current;\n    if (!el || !(el instanceof getOwnerWindow(el).Element)) {\n      console.error('<Focusable> child must forward its ref to a DOM element.');\n      return;\n    }\n\n    if (!props.isDisabled && !isFocusable(el)) {\n      console.warn('<Focusable> child must be focusable. Please ensure the tabIndex prop is passed through.');\n      return;\n    }\n\n    if (\n      el.localName !== 'button' &&\n      el.localName !== 'input' &&\n      el.localName !== 'select' &&\n      el.localName !== 'textarea' &&\n      el.localName !== 'a' &&\n      el.localName !== 'area' &&\n      el.localName !== 'summary' &&\n      el.localName !== 'img' &&\n      el.localName !== 'svg'\n    ) {\n      let role = el.getAttribute('role');\n      if (!role) {\n        console.warn('<Focusable> child must have an interactive ARIA role.');\n      } else if (\n        // https://w3c.github.io/aria/#widget_roles\n        role !== 'application' &&\n        role !== 'button' &&\n        role !== 'checkbox' &&\n        role !== 'combobox' &&\n        role !== 'gridcell' &&\n        role !== 'link' &&\n        role !== 'menuitem' &&\n        role !== 'menuitemcheckbox' &&\n        role !== 'menuitemradio' &&\n        role !== 'option' &&\n        role !== 'radio' &&\n        role !== 'searchbox' &&\n        role !== 'separator' &&\n        role !== 'slider' &&\n        role !== 'spinbutton' &&\n        role !== 'switch' &&\n        role !== 'tab' &&\n        role !== 'tabpanel' &&\n        role !== 'textbox' &&\n        role !== 'treeitem' &&\n        // aria-describedby is also announced on these roles\n        role !== 'img' &&\n        role !== 'meter' &&\n        role !== 'progressbar'\n      ) {\n        console.warn(`<Focusable> child must have an interactive ARIA role. Got \"${role}\".`);\n      }\n    }\n  }, [ref, props.isDisabled]);\n\n  // @ts-ignore\n  let childRef = parseInt(React.version, 10) < 19 ? child.ref : child.props.ref;\n\n  return React.cloneElement(\n    child,\n    {\n      ...mergeProps(focusableProps, child.props),\n      // @ts-ignore\n      ref: mergeRefs(childRef, ref)\n    }\n  );\n});\n"],"names":[],"version":3,"file":"useFocusable.module.js.map"}

package/dist/useHover.main.js

@@ -1,3 +1,4 @@
+var $82z6W$reactariautils = require("@react-aria/utils");
 var $82z6W$react = require("react");
 
 
@@ -21,6 +22,7 @@ $parcel$export(module.exports, "useHover", () => $ffbc150311c75f01$export$ae780d
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
+
 // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
 // We want to ignore these emulated events so they do not trigger hover behavior.
 // See https://bugs.webkit.org/show_bug.cgi?id=214609.
@@ -61,6 +63,7 @@ function $ffbc150311c75f01$export$ae780daf29e6d456(props) {
         target: null
     }).current;
     (0, $82z6W$react.useEffect)($ffbc150311c75f01$var$setupGlobalTouchEvents, []);
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $82z6W$reactariautils.useGlobalListeners)();
     let { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd } = (0, $82z6W$react.useMemo)(()=>{
         let triggerHoverStart = (event, pointerType)=>{
             state.pointerType = pointerType;
@@ -68,6 +71,15 @@ function $ffbc150311c75f01$export$ae780daf29e6d456(props) {
             state.isHovered = true;
             let target = event.currentTarget;
             state.target = target;
+            // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+            // even though the originally hovered target may have shrunk in size so it is no longer hovered.
+            // However, a pointerover event will be fired on the new target the mouse is over.
+            // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
+            addGlobalListener((0, $82z6W$reactariautils.getOwnerDocument)(event.target), 'pointerover', (e)=>{
+                if (state.isHovered && state.target && !(0, $82z6W$reactariautils.nodeContains)(state.target, e.target)) triggerHoverEnd(e, e.pointerType);
+            }, {
+                capture: true
+            });
             if (onHoverStart) onHoverStart({
                 type: 'hoverstart',
                 target: target,
@@ -77,11 +89,12 @@ function $ffbc150311c75f01$export$ae780daf29e6d456(props) {
             setHovered(true);
         };
         let triggerHoverEnd = (event, pointerType)=>{
+            let target = state.target;
             state.pointerType = '';
             state.target = null;
-            if (pointerType === 'touch' || !state.isHovered) return;
+            if (pointerType === 'touch' || !state.isHovered || !target) return;
             state.isHovered = false;
-            let target = event.currentTarget;
+            removeAllGlobalListeners();
             if (onHoverEnd) onHoverEnd({
                 type: 'hoverend',
                 target: target,
@@ -120,7 +133,9 @@ function $ffbc150311c75f01$export$ae780daf29e6d456(props) {
         onHoverChange,
         onHoverEnd,
         isDisabled,
-        state
+        state,
+        addGlobalListener,
+        removeAllGlobalListeners
     ]);
     (0, $82z6W$react.useEffect)(()=>{
         // Call the triggerHoverEnd as soon as isDisabled changes to true

package/dist/useHover.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/interactions/src/useHover.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Portions of the code in this file are based on code from react.\n// Original licensing for the following can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions\n\nimport {DOMAttributes, HoverEvents} from '@react-types/shared';\nimport {useEffect, useMemo, useRef, useState} from 'react';\n\nexport interface HoverProps extends HoverEvents {\n  /** Whether the hover events should be disabled. */\n  isDisabled?: boolean\n}\n\nexport interface HoverResult {\n  /** Props to spread on the target element. */\n  hoverProps: DOMAttributes,\n  isHovered: boolean\n}\n\n// iOS fires onPointerEnter twice: once with pointerType=\"touch\" and again with pointerType=\"mouse\".\n// We want to ignore these emulated events so they do not trigger hover behavior.\n// See https://bugs.webkit.org/show_bug.cgi?id=214609.\nlet globalIgnoreEmulatedMouseEvents = false;\nlet hoverCount = 0;\n\nfunction setGlobalIgnoreEmulatedMouseEvents() {\n  globalIgnoreEmulatedMouseEvents = true;\n\n  // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter\n  // with pointerType=\"mouse\" immediately after onPointerUp and before onFocus. On other\n  // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in\n  // the distant future because a user previously touched the element.\n  setTimeout(() => {\n    globalIgnoreEmulatedMouseEvents = false;\n  }, 50);\n}\n\nfunction handleGlobalPointerEvent(e) {\n  if (e.pointerType === 'touch') {\n    setGlobalIgnoreEmulatedMouseEvents();\n  }\n}\n\nfunction setupGlobalTouchEvents() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (typeof PointerEvent !== 'undefined') {\n    document.addEventListener('pointerup', handleGlobalPointerEvent);\n  } else {\n    document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n  }\n\n  hoverCount++;\n  return () => {\n    hoverCount--;\n    if (hoverCount > 0) {\n      return;\n    }\n\n    if (typeof PointerEvent !== 'undefined') {\n      document.removeEventListener('pointerup', handleGlobalPointerEvent);\n    } else {\n      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n    }\n  };\n}\n\n/**\n * Handles pointer hover interactions for an element. Normalizes behavior\n * across browsers and platforms, and ignores emulated mouse events on touch devices.\n */\nexport function useHover(props: HoverProps): HoverResult {\n  let {\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    isDisabled\n  } = props;\n\n  let [isHovered, setHovered] = useState(false);\n  let state = useRef({\n    isHovered: false,\n    ignoreEmulatedMouseEvents: false,\n    pointerType: '',\n    target: null\n  }).current;\n\n  useEffect(setupGlobalTouchEvents, []);\n\n  let {hoverProps, triggerHoverEnd} = useMemo(() => {\n    let triggerHoverStart = (event, pointerType) => {\n      state.pointerType = pointerType;\n      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {\n        return;\n      }\n\n      state.isHovered = true;\n      let target = event.currentTarget;\n      state.target = target;\n\n      if (onHoverStart) {\n        onHoverStart({\n          type: 'hoverstart',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(true);\n      }\n\n      setHovered(true);\n    };\n\n    let triggerHoverEnd = (event, pointerType) => {\n      state.pointerType = '';\n      state.target = null;\n\n      if (pointerType === 'touch' || !state.isHovered) {\n        return;\n      }\n\n      state.isHovered = false;\n      let target = event.currentTarget;\n      if (onHoverEnd) {\n        onHoverEnd({\n          type: 'hoverend',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(false);\n      }\n\n      setHovered(false);\n    };\n\n    let hoverProps: DOMAttributes = {};\n\n    if (typeof PointerEvent !== 'undefined') {\n      hoverProps.onPointerEnter = (e) => {\n        if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {\n          return;\n        }\n\n        triggerHoverStart(e, e.pointerType);\n      };\n\n      hoverProps.onPointerLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, e.pointerType);\n        }\n      };\n    } else {\n      hoverProps.onTouchStart = () => {\n        state.ignoreEmulatedMouseEvents = true;\n      };\n\n      hoverProps.onMouseEnter = (e) => {\n        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {\n          triggerHoverStart(e, 'mouse');\n        }\n\n        state.ignoreEmulatedMouseEvents = false;\n      };\n\n      hoverProps.onMouseLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, 'mouse');\n        }\n      };\n    }\n    return {hoverProps, triggerHoverEnd};\n  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);\n\n  useEffect(() => {\n    // Call the triggerHoverEnd as soon as isDisabled changes to true\n    // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering\n    if (isDisabled) {\n      triggerHoverEnd({currentTarget: state.target}, state.pointerType);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDisabled]);\n\n  return {\n    hoverProps,\n    isHovered\n  };\n}\n"],"names":[],"version":3,"file":"useHover.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/interactions/src/useHover.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Portions of the code in this file are based on code from react.\n// Original licensing for the following can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions\n\nimport {DOMAttributes, HoverEvents} from '@react-types/shared';\nimport {getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';\nimport {useEffect, useMemo, useRef, useState} from 'react';\n\nexport interface HoverProps extends HoverEvents {\n  /** Whether the hover events should be disabled. */\n  isDisabled?: boolean\n}\n\nexport interface HoverResult {\n  /** Props to spread on the target element. */\n  hoverProps: DOMAttributes,\n  isHovered: boolean\n}\n\n// iOS fires onPointerEnter twice: once with pointerType=\"touch\" and again with pointerType=\"mouse\".\n// We want to ignore these emulated events so they do not trigger hover behavior.\n// See https://bugs.webkit.org/show_bug.cgi?id=214609.\nlet globalIgnoreEmulatedMouseEvents = false;\nlet hoverCount = 0;\n\nfunction setGlobalIgnoreEmulatedMouseEvents() {\n  globalIgnoreEmulatedMouseEvents = true;\n\n  // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter\n  // with pointerType=\"mouse\" immediately after onPointerUp and before onFocus. On other\n  // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in\n  // the distant future because a user previously touched the element.\n  setTimeout(() => {\n    globalIgnoreEmulatedMouseEvents = false;\n  }, 50);\n}\n\nfunction handleGlobalPointerEvent(e) {\n  if (e.pointerType === 'touch') {\n    setGlobalIgnoreEmulatedMouseEvents();\n  }\n}\n\nfunction setupGlobalTouchEvents() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (typeof PointerEvent !== 'undefined') {\n    document.addEventListener('pointerup', handleGlobalPointerEvent);\n  } else {\n    document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n  }\n\n  hoverCount++;\n  return () => {\n    hoverCount--;\n    if (hoverCount > 0) {\n      return;\n    }\n\n    if (typeof PointerEvent !== 'undefined') {\n      document.removeEventListener('pointerup', handleGlobalPointerEvent);\n    } else {\n      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n    }\n  };\n}\n\n/**\n * Handles pointer hover interactions for an element. Normalizes behavior\n * across browsers and platforms, and ignores emulated mouse events on touch devices.\n */\nexport function useHover(props: HoverProps): HoverResult {\n  let {\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    isDisabled\n  } = props;\n\n  let [isHovered, setHovered] = useState(false);\n  let state = useRef({\n    isHovered: false,\n    ignoreEmulatedMouseEvents: false,\n    pointerType: '',\n    target: null\n  }).current;\n\n  useEffect(setupGlobalTouchEvents, []);\n  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();\n\n  let {hoverProps, triggerHoverEnd} = useMemo(() => {\n    let triggerHoverStart = (event, pointerType) => {\n      state.pointerType = pointerType;\n      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {\n        return;\n      }\n\n      state.isHovered = true;\n      let target = event.currentTarget;\n      state.target = target;\n\n      // When an element that is hovered over is removed, no pointerleave event is fired by the browser,\n      // even though the originally hovered target may have shrunk in size so it is no longer hovered.\n      // However, a pointerover event will be fired on the new target the mouse is over.\n      // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.\n      addGlobalListener(getOwnerDocument(event.target), 'pointerover', e => {\n        if (state.isHovered && state.target && !nodeContains(state.target, e.target as Element)) {\n          triggerHoverEnd(e, e.pointerType);\n        }\n      }, {capture: true});\n\n      if (onHoverStart) {\n        onHoverStart({\n          type: 'hoverstart',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(true);\n      }\n\n      setHovered(true);\n    };\n\n    let triggerHoverEnd = (event, pointerType) => {\n      let target = state.target;\n      state.pointerType = '';\n      state.target = null;\n\n      if (pointerType === 'touch' || !state.isHovered || !target) {\n        return;\n      }\n\n      state.isHovered = false;\n      removeAllGlobalListeners();\n\n      if (onHoverEnd) {\n        onHoverEnd({\n          type: 'hoverend',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(false);\n      }\n\n      setHovered(false);\n    };\n\n    let hoverProps: DOMAttributes = {};\n\n    if (typeof PointerEvent !== 'undefined') {\n      hoverProps.onPointerEnter = (e) => {\n        if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {\n          return;\n        }\n\n        triggerHoverStart(e, e.pointerType);\n      };\n\n      hoverProps.onPointerLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, e.pointerType);\n        }\n      };\n    } else {\n      hoverProps.onTouchStart = () => {\n        state.ignoreEmulatedMouseEvents = true;\n      };\n\n      hoverProps.onMouseEnter = (e) => {\n        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {\n          triggerHoverStart(e, 'mouse');\n        }\n\n        state.ignoreEmulatedMouseEvents = false;\n      };\n\n      hoverProps.onMouseLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, 'mouse');\n        }\n      };\n    }\n    return {hoverProps, triggerHoverEnd};\n  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state, addGlobalListener, removeAllGlobalListeners]);\n\n  useEffect(() => {\n    // Call the triggerHoverEnd as soon as isDisabled changes to true\n    // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering\n    if (isDisabled) {\n      triggerHoverEnd({currentTarget: state.target}, state.pointerType);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDisabled]);\n\n  return {\n    hoverProps,\n    isHovered\n  };\n}\n"],"names":[],"version":3,"file":"useHover.main.js.map"}

package/dist/useHover.mjs

@@ -1,3 +1,4 @@
+import {useGlobalListeners as $AWxnT$useGlobalListeners, getOwnerDocument as $AWxnT$getOwnerDocument, nodeContains as $AWxnT$nodeContains} from "@react-aria/utils";
 import {useState as $AWxnT$useState, useRef as $AWxnT$useRef, useEffect as $AWxnT$useEffect, useMemo as $AWxnT$useMemo} from "react";
 
 /*
@@ -15,6 +16,7 @@ import {useState as $AWxnT$useState, useRef as $AWxnT$useRef, useEffect as $AWxn
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
+
 // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
 // We want to ignore these emulated events so they do not trigger hover behavior.
 // See https://bugs.webkit.org/show_bug.cgi?id=214609.
@@ -55,6 +57,7 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
         target: null
     }).current;
     (0, $AWxnT$useEffect)($6179b936705e76d3$var$setupGlobalTouchEvents, []);
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $AWxnT$useGlobalListeners)();
     let { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd } = (0, $AWxnT$useMemo)(()=>{
         let triggerHoverStart = (event, pointerType)=>{
             state.pointerType = pointerType;
@@ -62,6 +65,15 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
             state.isHovered = true;
             let target = event.currentTarget;
             state.target = target;
+            // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+            // even though the originally hovered target may have shrunk in size so it is no longer hovered.
+            // However, a pointerover event will be fired on the new target the mouse is over.
+            // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
+            addGlobalListener((0, $AWxnT$getOwnerDocument)(event.target), 'pointerover', (e)=>{
+                if (state.isHovered && state.target && !(0, $AWxnT$nodeContains)(state.target, e.target)) triggerHoverEnd(e, e.pointerType);
+            }, {
+                capture: true
+            });
             if (onHoverStart) onHoverStart({
                 type: 'hoverstart',
                 target: target,
@@ -71,11 +83,12 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
             setHovered(true);
         };
         let triggerHoverEnd = (event, pointerType)=>{
+            let target = state.target;
             state.pointerType = '';
             state.target = null;
-            if (pointerType === 'touch' || !state.isHovered) return;
+            if (pointerType === 'touch' || !state.isHovered || !target) return;
             state.isHovered = false;
-            let target = event.currentTarget;
+            removeAllGlobalListeners();
             if (onHoverEnd) onHoverEnd({
                 type: 'hoverend',
                 target: target,
@@ -114,7 +127,9 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
         onHoverChange,
         onHoverEnd,
         isDisabled,
-        state
+        state,
+        addGlobalListener,
+        removeAllGlobalListeners
     ]);
     (0, $AWxnT$useEffect)(()=>{
         // Call the triggerHoverEnd as soon as isDisabled changes to true

package/dist/useHover.module.js

@@ -1,3 +1,4 @@
+import {useGlobalListeners as $AWxnT$useGlobalListeners, getOwnerDocument as $AWxnT$getOwnerDocument, nodeContains as $AWxnT$nodeContains} from "@react-aria/utils";
 import {useState as $AWxnT$useState, useRef as $AWxnT$useRef, useEffect as $AWxnT$useEffect, useMemo as $AWxnT$useMemo} from "react";
 
 /*
@@ -15,6 +16,7 @@ import {useState as $AWxnT$useState, useRef as $AWxnT$useRef, useEffect as $AWxn
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
+
 // iOS fires onPointerEnter twice: once with pointerType="touch" and again with pointerType="mouse".
 // We want to ignore these emulated events so they do not trigger hover behavior.
 // See https://bugs.webkit.org/show_bug.cgi?id=214609.
@@ -55,6 +57,7 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
         target: null
     }).current;
     (0, $AWxnT$useEffect)($6179b936705e76d3$var$setupGlobalTouchEvents, []);
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $AWxnT$useGlobalListeners)();
     let { hoverProps: hoverProps, triggerHoverEnd: triggerHoverEnd } = (0, $AWxnT$useMemo)(()=>{
         let triggerHoverStart = (event, pointerType)=>{
             state.pointerType = pointerType;
@@ -62,6 +65,15 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
             state.isHovered = true;
             let target = event.currentTarget;
             state.target = target;
+            // When an element that is hovered over is removed, no pointerleave event is fired by the browser,
+            // even though the originally hovered target may have shrunk in size so it is no longer hovered.
+            // However, a pointerover event will be fired on the new target the mouse is over.
+            // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.
+            addGlobalListener((0, $AWxnT$getOwnerDocument)(event.target), 'pointerover', (e)=>{
+                if (state.isHovered && state.target && !(0, $AWxnT$nodeContains)(state.target, e.target)) triggerHoverEnd(e, e.pointerType);
+            }, {
+                capture: true
+            });
             if (onHoverStart) onHoverStart({
                 type: 'hoverstart',
                 target: target,
@@ -71,11 +83,12 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
             setHovered(true);
         };
         let triggerHoverEnd = (event, pointerType)=>{
+            let target = state.target;
             state.pointerType = '';
             state.target = null;
-            if (pointerType === 'touch' || !state.isHovered) return;
+            if (pointerType === 'touch' || !state.isHovered || !target) return;
             state.isHovered = false;
-            let target = event.currentTarget;
+            removeAllGlobalListeners();
             if (onHoverEnd) onHoverEnd({
                 type: 'hoverend',
                 target: target,
@@ -114,7 +127,9 @@ function $6179b936705e76d3$export$ae780daf29e6d456(props) {
         onHoverChange,
         onHoverEnd,
         isDisabled,
-        state
+        state,
+        addGlobalListener,
+        removeAllGlobalListeners
     ]);
     (0, $AWxnT$useEffect)(()=>{
         // Call the triggerHoverEnd as soon as isDisabled changes to true

package/dist/useHover.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/interactions/src/useHover.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Portions of the code in this file are based on code from react.\n// Original licensing for the following can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions\n\nimport {DOMAttributes, HoverEvents} from '@react-types/shared';\nimport {useEffect, useMemo, useRef, useState} from 'react';\n\nexport interface HoverProps extends HoverEvents {\n  /** Whether the hover events should be disabled. */\n  isDisabled?: boolean\n}\n\nexport interface HoverResult {\n  /** Props to spread on the target element. */\n  hoverProps: DOMAttributes,\n  isHovered: boolean\n}\n\n// iOS fires onPointerEnter twice: once with pointerType=\"touch\" and again with pointerType=\"mouse\".\n// We want to ignore these emulated events so they do not trigger hover behavior.\n// See https://bugs.webkit.org/show_bug.cgi?id=214609.\nlet globalIgnoreEmulatedMouseEvents = false;\nlet hoverCount = 0;\n\nfunction setGlobalIgnoreEmulatedMouseEvents() {\n  globalIgnoreEmulatedMouseEvents = true;\n\n  // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter\n  // with pointerType=\"mouse\" immediately after onPointerUp and before onFocus. On other\n  // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in\n  // the distant future because a user previously touched the element.\n  setTimeout(() => {\n    globalIgnoreEmulatedMouseEvents = false;\n  }, 50);\n}\n\nfunction handleGlobalPointerEvent(e) {\n  if (e.pointerType === 'touch') {\n    setGlobalIgnoreEmulatedMouseEvents();\n  }\n}\n\nfunction setupGlobalTouchEvents() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (typeof PointerEvent !== 'undefined') {\n    document.addEventListener('pointerup', handleGlobalPointerEvent);\n  } else {\n    document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n  }\n\n  hoverCount++;\n  return () => {\n    hoverCount--;\n    if (hoverCount > 0) {\n      return;\n    }\n\n    if (typeof PointerEvent !== 'undefined') {\n      document.removeEventListener('pointerup', handleGlobalPointerEvent);\n    } else {\n      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n    }\n  };\n}\n\n/**\n * Handles pointer hover interactions for an element. Normalizes behavior\n * across browsers and platforms, and ignores emulated mouse events on touch devices.\n */\nexport function useHover(props: HoverProps): HoverResult {\n  let {\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    isDisabled\n  } = props;\n\n  let [isHovered, setHovered] = useState(false);\n  let state = useRef({\n    isHovered: false,\n    ignoreEmulatedMouseEvents: false,\n    pointerType: '',\n    target: null\n  }).current;\n\n  useEffect(setupGlobalTouchEvents, []);\n\n  let {hoverProps, triggerHoverEnd} = useMemo(() => {\n    let triggerHoverStart = (event, pointerType) => {\n      state.pointerType = pointerType;\n      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {\n        return;\n      }\n\n      state.isHovered = true;\n      let target = event.currentTarget;\n      state.target = target;\n\n      if (onHoverStart) {\n        onHoverStart({\n          type: 'hoverstart',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(true);\n      }\n\n      setHovered(true);\n    };\n\n    let triggerHoverEnd = (event, pointerType) => {\n      state.pointerType = '';\n      state.target = null;\n\n      if (pointerType === 'touch' || !state.isHovered) {\n        return;\n      }\n\n      state.isHovered = false;\n      let target = event.currentTarget;\n      if (onHoverEnd) {\n        onHoverEnd({\n          type: 'hoverend',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(false);\n      }\n\n      setHovered(false);\n    };\n\n    let hoverProps: DOMAttributes = {};\n\n    if (typeof PointerEvent !== 'undefined') {\n      hoverProps.onPointerEnter = (e) => {\n        if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {\n          return;\n        }\n\n        triggerHoverStart(e, e.pointerType);\n      };\n\n      hoverProps.onPointerLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, e.pointerType);\n        }\n      };\n    } else {\n      hoverProps.onTouchStart = () => {\n        state.ignoreEmulatedMouseEvents = true;\n      };\n\n      hoverProps.onMouseEnter = (e) => {\n        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {\n          triggerHoverStart(e, 'mouse');\n        }\n\n        state.ignoreEmulatedMouseEvents = false;\n      };\n\n      hoverProps.onMouseLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, 'mouse');\n        }\n      };\n    }\n    return {hoverProps, triggerHoverEnd};\n  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state]);\n\n  useEffect(() => {\n    // Call the triggerHoverEnd as soon as isDisabled changes to true\n    // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering\n    if (isDisabled) {\n      triggerHoverEnd({currentTarget: state.target}, state.pointerType);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDisabled]);\n\n  return {\n    hoverProps,\n    isHovered\n  };\n}\n"],"names":[],"version":3,"file":"useHover.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/interactions/src/useHover.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Portions of the code in this file are based on code from react.\n// Original licensing for the following can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions\n\nimport {DOMAttributes, HoverEvents} from '@react-types/shared';\nimport {getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';\nimport {useEffect, useMemo, useRef, useState} from 'react';\n\nexport interface HoverProps extends HoverEvents {\n  /** Whether the hover events should be disabled. */\n  isDisabled?: boolean\n}\n\nexport interface HoverResult {\n  /** Props to spread on the target element. */\n  hoverProps: DOMAttributes,\n  isHovered: boolean\n}\n\n// iOS fires onPointerEnter twice: once with pointerType=\"touch\" and again with pointerType=\"mouse\".\n// We want to ignore these emulated events so they do not trigger hover behavior.\n// See https://bugs.webkit.org/show_bug.cgi?id=214609.\nlet globalIgnoreEmulatedMouseEvents = false;\nlet hoverCount = 0;\n\nfunction setGlobalIgnoreEmulatedMouseEvents() {\n  globalIgnoreEmulatedMouseEvents = true;\n\n  // Clear globalIgnoreEmulatedMouseEvents after a short timeout. iOS fires onPointerEnter\n  // with pointerType=\"mouse\" immediately after onPointerUp and before onFocus. On other\n  // devices that don't have this quirk, we don't want to ignore a mouse hover sometime in\n  // the distant future because a user previously touched the element.\n  setTimeout(() => {\n    globalIgnoreEmulatedMouseEvents = false;\n  }, 50);\n}\n\nfunction handleGlobalPointerEvent(e) {\n  if (e.pointerType === 'touch') {\n    setGlobalIgnoreEmulatedMouseEvents();\n  }\n}\n\nfunction setupGlobalTouchEvents() {\n  if (typeof document === 'undefined') {\n    return;\n  }\n\n  if (typeof PointerEvent !== 'undefined') {\n    document.addEventListener('pointerup', handleGlobalPointerEvent);\n  } else {\n    document.addEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n  }\n\n  hoverCount++;\n  return () => {\n    hoverCount--;\n    if (hoverCount > 0) {\n      return;\n    }\n\n    if (typeof PointerEvent !== 'undefined') {\n      document.removeEventListener('pointerup', handleGlobalPointerEvent);\n    } else {\n      document.removeEventListener('touchend', setGlobalIgnoreEmulatedMouseEvents);\n    }\n  };\n}\n\n/**\n * Handles pointer hover interactions for an element. Normalizes behavior\n * across browsers and platforms, and ignores emulated mouse events on touch devices.\n */\nexport function useHover(props: HoverProps): HoverResult {\n  let {\n    onHoverStart,\n    onHoverChange,\n    onHoverEnd,\n    isDisabled\n  } = props;\n\n  let [isHovered, setHovered] = useState(false);\n  let state = useRef({\n    isHovered: false,\n    ignoreEmulatedMouseEvents: false,\n    pointerType: '',\n    target: null\n  }).current;\n\n  useEffect(setupGlobalTouchEvents, []);\n  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();\n\n  let {hoverProps, triggerHoverEnd} = useMemo(() => {\n    let triggerHoverStart = (event, pointerType) => {\n      state.pointerType = pointerType;\n      if (isDisabled || pointerType === 'touch' || state.isHovered || !event.currentTarget.contains(event.target)) {\n        return;\n      }\n\n      state.isHovered = true;\n      let target = event.currentTarget;\n      state.target = target;\n\n      // When an element that is hovered over is removed, no pointerleave event is fired by the browser,\n      // even though the originally hovered target may have shrunk in size so it is no longer hovered.\n      // However, a pointerover event will be fired on the new target the mouse is over.\n      // In Chrome this happens immediately. In Safari and Firefox, it happens upon moving the mouse one pixel.\n      addGlobalListener(getOwnerDocument(event.target), 'pointerover', e => {\n        if (state.isHovered && state.target && !nodeContains(state.target, e.target as Element)) {\n          triggerHoverEnd(e, e.pointerType);\n        }\n      }, {capture: true});\n\n      if (onHoverStart) {\n        onHoverStart({\n          type: 'hoverstart',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(true);\n      }\n\n      setHovered(true);\n    };\n\n    let triggerHoverEnd = (event, pointerType) => {\n      let target = state.target;\n      state.pointerType = '';\n      state.target = null;\n\n      if (pointerType === 'touch' || !state.isHovered || !target) {\n        return;\n      }\n\n      state.isHovered = false;\n      removeAllGlobalListeners();\n\n      if (onHoverEnd) {\n        onHoverEnd({\n          type: 'hoverend',\n          target,\n          pointerType\n        });\n      }\n\n      if (onHoverChange) {\n        onHoverChange(false);\n      }\n\n      setHovered(false);\n    };\n\n    let hoverProps: DOMAttributes = {};\n\n    if (typeof PointerEvent !== 'undefined') {\n      hoverProps.onPointerEnter = (e) => {\n        if (globalIgnoreEmulatedMouseEvents && e.pointerType === 'mouse') {\n          return;\n        }\n\n        triggerHoverStart(e, e.pointerType);\n      };\n\n      hoverProps.onPointerLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, e.pointerType);\n        }\n      };\n    } else {\n      hoverProps.onTouchStart = () => {\n        state.ignoreEmulatedMouseEvents = true;\n      };\n\n      hoverProps.onMouseEnter = (e) => {\n        if (!state.ignoreEmulatedMouseEvents && !globalIgnoreEmulatedMouseEvents) {\n          triggerHoverStart(e, 'mouse');\n        }\n\n        state.ignoreEmulatedMouseEvents = false;\n      };\n\n      hoverProps.onMouseLeave = (e) => {\n        if (!isDisabled && e.currentTarget.contains(e.target as Element)) {\n          triggerHoverEnd(e, 'mouse');\n        }\n      };\n    }\n    return {hoverProps, triggerHoverEnd};\n  }, [onHoverStart, onHoverChange, onHoverEnd, isDisabled, state, addGlobalListener, removeAllGlobalListeners]);\n\n  useEffect(() => {\n    // Call the triggerHoverEnd as soon as isDisabled changes to true\n    // Safe to call triggerHoverEnd, it will early return if we aren't currently hovering\n    if (isDisabled) {\n      triggerHoverEnd({currentTarget: state.target}, state.pointerType);\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isDisabled]);\n\n  return {\n    hoverProps,\n    isHovered\n  };\n}\n"],"names":[],"version":3,"file":"useHover.module.js.map"}

package/dist/useInteractOutside.main.js

@@ -94,7 +94,12 @@ function $edcfa848c42f94f4$var$isValidEvent(event, ref) {
         // If the target is within a top layer element (e.g. toasts), ignore.
         if (event.target.closest('[data-react-aria-top-layer]')) return false;
     }
-    return ref.current && !ref.current.contains(event.target);
+    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);
 }
 
 

package/dist/useInteractOutside.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,kEAAkE;AAClE,2DAA2D;AAC3D,yDAAyD;AACzD,kHAAkH;;;AAkB3G,SAAS,0CAAmB,KAA2B;IAC5D,IAAI,OAAC,GAAG,qBAAE,iBAAiB,cAAE,UAAU,0BAAE,sBAAsB,EAAC,GAAG;IACnE,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;QACpB,eAAe;QACf,2BAA2B;IAC7B;IAEA,IAAI,gBAAgB,CAAA,GAAA,oCAAa,EAAE,CAAC;QAClC,IAAI,qBAAqB,mCAAa,GAAG,MAAM;YAC7C,IAAI,wBACF,uBAAuB;YAEzB,SAAS,OAAO,CAAC,aAAa,GAAG;QACnC;IACF;IAEA,IAAI,yBAAyB,CAAA,GAAA,oCAAa,EAAE,CAAC;QAC3C,IAAI,mBACF,kBAAkB;IAEtB;IAEA,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,QAAQ,SAAS,OAAO;QAC5B,IAAI,YACF;QAGF,MAAM,UAAU,IAAI,OAAO;QAC3B,MAAM,iBAAiB,CAAA,GAAA,sCAAe,EAAE;QAExC,mFAAmF;QACnF,IAAI,OAAO,iBAAiB,aAAa;YACvC,IAAI,cAAc,CAAC;gBACjB,IAAI,MAAM,aAAa,IAAI,mCAAa,GAAG,MACzC,uBAAuB;gBAEzB,MAAM,aAAa,GAAG;YACxB;YAEA,iDAAiD;YACjD,eAAe,gBAAgB,CAAC,eAAe,eAAe;YAC9D,eAAe,gBAAgB,CAAC,aAAa,aAAa;YAE1D,OAAO;gBACL,eAAe,mBAAmB,CAAC,eAAe,eAAe;gBACjE,eAAe,mBAAmB,CAAC,aAAa,aAAa;YAC/D;QACF,OAAO;YACL,IAAI,YAAY,CAAC;gBACf,IAAI,MAAM,yBAAyB,EACjC,MAAM,yBAAyB,GAAG;qBAC7B,IAAI,MAAM,aAAa,IAAI,mCAAa,GAAG,MAChD,uBAAuB;gBAEzB,MAAM,aAAa,GAAG;YACxB;YAEA,IAAI,aAAa,CAAC;gBAChB,MAAM,yBAAyB,GAAG;gBAClC,IAAI,MAAM,aAAa,IAAI,mCAAa,GAAG,MACzC,uBAAuB;gBAEzB,MAAM,aAAa,GAAG;YACxB;YAEA,eAAe,gBAAgB,CAAC,aAAa,eAAe;YAC5D,eAAe,gBAAgB,CAAC,WAAW,WAAW;YACtD,eAAe,gBAAgB,CAAC,cAAc,eAAe;YAC7D,eAAe,gBAAgB,CAAC,YAAY,YAAY;YAExD,OAAO;gBACL,eAAe,mBAAmB,CAAC,aAAa,eAAe;gBAC/D,eAAe,mBAAmB,CAAC,WAAW,WAAW;gBACzD,eAAe,mBAAmB,CAAC,cAAc,eAAe;gBAChE,eAAe,mBAAmB,CAAC,YAAY,YAAY;YAC7D;QACF;IACF,GAAG;QAAC;QAAK;QAAY;QAAe;KAAuB;AAC7D;AAEA,SAAS,mCAAa,KAAK,EAAE,GAAG;IAC9B,IAAI,MAAM,MAAM,GAAG,GACjB,OAAO;IAGT,IAAI,MAAM,MAAM,EAAE;QAChB,2DAA2D;QAC3D,MAAM,gBAAgB,MAAM,MAAM,CAAC,aAAa;QAChD,IAAI,CAAC,iBAAiB,CAAC,cAAc,eAAe,CAAC,QAAQ,CAAC,MAAM,MAAM,GACxE,OAAO;QAGT,qEAAqE;QACrE,IAAI,MAAM,MAAM,CAAC,OAAO,CAAC,gCACvB,OAAO;IAEX;IAEA,OAAO,IAAI,OAAO,IAAI,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,MAAM,MAAM;AAC1D","sources":["packages/@react-aria/interactions/src/useInteractOutside.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Portions of the code in this file are based on code from react.\n// Original licensing for the following can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions\n\nimport {getOwnerDocument, useEffectEvent} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {useEffect, useRef} from 'react';\n\nexport interface InteractOutsideProps {\n  ref: RefObject<Element | null>,\n  onInteractOutside?: (e: PointerEvent) => void,\n  onInteractOutsideStart?: (e: PointerEvent) => void,\n  /** Whether the interact outside events should be disabled. */\n  isDisabled?: boolean\n}\n\n/**\n * Example, used in components like Dialogs and Popovers so they can close\n * when a user clicks outside them.\n */\nexport function useInteractOutside(props: InteractOutsideProps) {\n  let {ref, onInteractOutside, isDisabled, onInteractOutsideStart} = props;\n  let stateRef = useRef({\n    isPointerDown: false,\n    ignoreEmulatedMouseEvents: false\n  });\n\n  let onPointerDown = useEffectEvent((e) => {\n    if (onInteractOutside && isValidEvent(e, ref)) {\n      if (onInteractOutsideStart) {\n        onInteractOutsideStart(e);\n      }\n      stateRef.current.isPointerDown = true;\n    }\n  });\n\n  let triggerInteractOutside = useEffectEvent((e: PointerEvent) => {\n    if (onInteractOutside) {\n      onInteractOutside(e);\n    }\n  });\n\n  useEffect(() => {\n    let state = stateRef.current;\n    if (isDisabled) {\n      return;\n    }\n\n    const element = ref.current;\n    const documentObject = getOwnerDocument(element);\n\n    // Use pointer events if available. Otherwise, fall back to mouse and touch events.\n    if (typeof PointerEvent !== 'undefined') {\n      let onPointerUp = (e) => {\n        if (state.isPointerDown && isValidEvent(e, ref)) {\n          triggerInteractOutside(e);\n        }\n        state.isPointerDown = false;\n      };\n\n      // changing these to capture phase fixed combobox\n      documentObject.addEventListener('pointerdown', onPointerDown, true);\n      documentObject.addEventListener('pointerup', onPointerUp, true);\n\n      return () => {\n        documentObject.removeEventListener('pointerdown', onPointerDown, true);\n        documentObject.removeEventListener('pointerup', onPointerUp, true);\n      };\n    } else {\n      let onMouseUp = (e) => {\n        if (state.ignoreEmulatedMouseEvents) {\n          state.ignoreEmulatedMouseEvents = false;\n        } else if (state.isPointerDown && isValidEvent(e, ref)) {\n          triggerInteractOutside(e);\n        }\n        state.isPointerDown = false;\n      };\n\n      let onTouchEnd = (e) => {\n        state.ignoreEmulatedMouseEvents = true;\n        if (state.isPointerDown && isValidEvent(e, ref)) {\n          triggerInteractOutside(e);\n        }\n        state.isPointerDown = false;\n      };\n\n      documentObject.addEventListener('mousedown', onPointerDown, true);\n      documentObject.addEventListener('mouseup', onMouseUp, true);\n      documentObject.addEventListener('touchstart', onPointerDown, true);\n      documentObject.addEventListener('touchend', onTouchEnd, true);\n\n      return () => {\n        documentObject.removeEventListener('mousedown', onPointerDown, true);\n        documentObject.removeEventListener('mouseup', onMouseUp, true);\n        documentObject.removeEventListener('touchstart', onPointerDown, true);\n        documentObject.removeEventListener('touchend', onTouchEnd, true);\n      };\n    }\n  }, [ref, isDisabled, onPointerDown, triggerInteractOutside]);\n}\n\nfunction isValidEvent(event, ref) {\n  if (event.button > 0) {\n    return false;\n  }\n\n  if (event.target) {\n    // if the event target is no longer in the document, ignore\n    const ownerDocument = event.target.ownerDocument;\n    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {\n      return false;\n    }\n\n    // If the target is within a top layer element (e.g. toasts), ignore.\n    if (event.target.closest('[data-react-aria-top-layer]')) {\n      return false;\n    }\n  }\n\n  return ref.current && !ref.current.contains(event.target);\n}\n"],"names":[],"version":3,"file":"useInteractOutside.main.js.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,kEAAkE;AAClE,2DAA2D;AAC3D,yDAAyD;AACzD,kHAAkH;;;AAkB3G,SAAS,0CAAmB,KAA2B;IAC5D,IAAI,OAAC,GAAG,qBAAE,iBAAiB,cAAE,UAAU,0BAAE,sBAAsB,EAAC,GAAG;IACnE,IAAI,WAAW,CAAA,GAAA,mBAAK,EAAE;QACpB,eAAe;QACf,2BAA2B;IAC7B;IAEA,IAAI,gBAAgB,CAAA,GAAA,oCAAa,EAAE,CAAC;QAClC,IAAI,qBAAqB,mCAAa,GAAG,MAAM;YAC7C,IAAI,wBACF,uBAAuB;YAEzB,SAAS,OAAO,CAAC,aAAa,GAAG;QACnC;IACF;IAEA,IAAI,yBAAyB,CAAA,GAAA,oCAAa,EAAE,CAAC;QAC3C,IAAI,mBACF,kBAAkB;IAEtB;IAEA,CAAA,GAAA,sBAAQ,EAAE;QACR,IAAI,QAAQ,SAAS,OAAO;QAC5B,IAAI,YACF;QAGF,MAAM,UAAU,IAAI,OAAO;QAC3B,MAAM,iBAAiB,CAAA,GAAA,sCAAe,EAAE;QAExC,mFAAmF;QACnF,IAAI,OAAO,iBAAiB,aAAa;YACvC,IAAI,cAAc,CAAC;gBACjB,IAAI,MAAM,aAAa,IAAI,mCAAa,GAAG,MACzC,uBAAuB;gBAEzB,MAAM,aAAa,GAAG;YACxB;YAEA,iDAAiD;YACjD,eAAe,gBAAgB,CAAC,eAAe,eAAe;YAC9D,eAAe,gBAAgB,CAAC,aAAa,aAAa;YAE1D,OAAO;gBACL,eAAe,mBAAmB,CAAC,eAAe,eAAe;gBACjE,eAAe,mBAAmB,CAAC,aAAa,aAAa;YAC/D;QACF,OAAO;YACL,IAAI,YAAY,CAAC;gBACf,IAAI,MAAM,yBAAyB,EACjC,MAAM,yBAAyB,GAAG;qBAC7B,IAAI,MAAM,aAAa,IAAI,mCAAa,GAAG,MAChD,uBAAuB;gBAEzB,MAAM,aAAa,GAAG;YACxB;YAEA,IAAI,aAAa,CAAC;gBAChB,MAAM,yBAAyB,GAAG;gBAClC,IAAI,MAAM,aAAa,IAAI,mCAAa,GAAG,MACzC,uBAAuB;gBAEzB,MAAM,aAAa,GAAG;YACxB;YAEA,eAAe,gBAAgB,CAAC,aAAa,eAAe;YAC5D,eAAe,gBAAgB,CAAC,WAAW,WAAW;YACtD,eAAe,gBAAgB,CAAC,cAAc,eAAe;YAC7D,eAAe,gBAAgB,CAAC,YAAY,YAAY;YAExD,OAAO;gBACL,eAAe,mBAAmB,CAAC,aAAa,eAAe;gBAC/D,eAAe,mBAAmB,CAAC,WAAW,WAAW;gBACzD,eAAe,mBAAmB,CAAC,cAAc,eAAe;gBAChE,eAAe,mBAAmB,CAAC,YAAY,YAAY;YAC7D;QACF;IACF,GAAG;QAAC;QAAK;QAAY;QAAe;KAAuB;AAC7D;AAEA,SAAS,mCAAa,KAAK,EAAE,GAAG;IAC9B,IAAI,MAAM,MAAM,GAAG,GACjB,OAAO;IAET,IAAI,MAAM,MAAM,EAAE;QAChB,2DAA2D;QAC3D,MAAM,gBAAgB,MAAM,MAAM,CAAC,aAAa;QAChD,IAAI,CAAC,iBAAiB,CAAC,cAAc,eAAe,CAAC,QAAQ,CAAC,MAAM,MAAM,GACxE,OAAO;QAET,qEAAqE;QACrE,IAAI,MAAM,MAAM,CAAC,OAAO,CAAC,gCACvB,OAAO;IAEX;IAEA,IAAI,CAAC,IAAI,OAAO,EACd,OAAO;IAGT,sFAAsF;IACtF,+FAA+F;IAC/F,yFAAyF;IACzF,sEAAsE;IACtE,OAAO,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,OAAO;AACnD","sources":["packages/@react-aria/interactions/src/useInteractOutside.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n// Portions of the code in this file are based on code from react.\n// Original licensing for the following can be found in the\n// NOTICE file in the root directory of this source tree.\n// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions\n\nimport {getOwnerDocument, useEffectEvent} from '@react-aria/utils';\nimport {RefObject} from '@react-types/shared';\nimport {useEffect, useRef} from 'react';\n\nexport interface InteractOutsideProps {\n  ref: RefObject<Element | null>,\n  onInteractOutside?: (e: PointerEvent) => void,\n  onInteractOutsideStart?: (e: PointerEvent) => void,\n  /** Whether the interact outside events should be disabled. */\n  isDisabled?: boolean\n}\n\n/**\n * Example, used in components like Dialogs and Popovers so they can close\n * when a user clicks outside them.\n */\nexport function useInteractOutside(props: InteractOutsideProps) {\n  let {ref, onInteractOutside, isDisabled, onInteractOutsideStart} = props;\n  let stateRef = useRef({\n    isPointerDown: false,\n    ignoreEmulatedMouseEvents: false\n  });\n\n  let onPointerDown = useEffectEvent((e) => {\n    if (onInteractOutside && isValidEvent(e, ref)) {\n      if (onInteractOutsideStart) {\n        onInteractOutsideStart(e);\n      }\n      stateRef.current.isPointerDown = true;\n    }\n  });\n\n  let triggerInteractOutside = useEffectEvent((e: PointerEvent) => {\n    if (onInteractOutside) {\n      onInteractOutside(e);\n    }\n  });\n\n  useEffect(() => {\n    let state = stateRef.current;\n    if (isDisabled) {\n      return;\n    }\n\n    const element = ref.current;\n    const documentObject = getOwnerDocument(element);\n\n    // Use pointer events if available. Otherwise, fall back to mouse and touch events.\n    if (typeof PointerEvent !== 'undefined') {\n      let onPointerUp = (e) => {\n        if (state.isPointerDown && isValidEvent(e, ref)) {\n          triggerInteractOutside(e);\n        }\n        state.isPointerDown = false;\n      };\n\n      // changing these to capture phase fixed combobox\n      documentObject.addEventListener('pointerdown', onPointerDown, true);\n      documentObject.addEventListener('pointerup', onPointerUp, true);\n\n      return () => {\n        documentObject.removeEventListener('pointerdown', onPointerDown, true);\n        documentObject.removeEventListener('pointerup', onPointerUp, true);\n      };\n    } else {\n      let onMouseUp = (e) => {\n        if (state.ignoreEmulatedMouseEvents) {\n          state.ignoreEmulatedMouseEvents = false;\n        } else if (state.isPointerDown && isValidEvent(e, ref)) {\n          triggerInteractOutside(e);\n        }\n        state.isPointerDown = false;\n      };\n\n      let onTouchEnd = (e) => {\n        state.ignoreEmulatedMouseEvents = true;\n        if (state.isPointerDown && isValidEvent(e, ref)) {\n          triggerInteractOutside(e);\n        }\n        state.isPointerDown = false;\n      };\n\n      documentObject.addEventListener('mousedown', onPointerDown, true);\n      documentObject.addEventListener('mouseup', onMouseUp, true);\n      documentObject.addEventListener('touchstart', onPointerDown, true);\n      documentObject.addEventListener('touchend', onTouchEnd, true);\n\n      return () => {\n        documentObject.removeEventListener('mousedown', onPointerDown, true);\n        documentObject.removeEventListener('mouseup', onMouseUp, true);\n        documentObject.removeEventListener('touchstart', onPointerDown, true);\n        documentObject.removeEventListener('touchend', onTouchEnd, true);\n      };\n    }\n  }, [ref, isDisabled, onPointerDown, triggerInteractOutside]);\n}\n\nfunction isValidEvent(event, ref) {\n  if (event.button > 0) {\n    return false;\n  }\n  if (event.target) {\n    // if the event target is no longer in the document, ignore\n    const ownerDocument = event.target.ownerDocument;\n    if (!ownerDocument || !ownerDocument.documentElement.contains(event.target)) {\n      return false;\n    }\n    // If the target is within a top layer element (e.g. toasts), ignore.\n    if (event.target.closest('[data-react-aria-top-layer]')) {\n      return false;\n    }\n  }\n\n  if (!ref.current) {\n    return false;\n  }\n\n  // When the event source is inside a Shadow DOM, event.target is just the shadow root.\n  // Using event.composedPath instead means we can get the actual element inside the shadow root.\n  // This only works if the shadow root is open, there is no way to detect if it is closed.\n  // If the event composed path contains the ref, interaction is inside.\n  return !event.composedPath().includes(ref.current);\n}\n"],"names":[],"version":3,"file":"useInteractOutside.main.js.map"}

package/dist/useInteractOutside.mjs

@@ -88,7 +88,12 @@ function $e0b6e0b68ec7f50f$var$isValidEvent(event, ref) {
         // If the target is within a top layer element (e.g. toasts), ignore.
         if (event.target.closest('[data-react-aria-top-layer]')) return false;
     }
-    return ref.current && !ref.current.contains(event.target);
+    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);
 }
 
 

package/dist/useInteractOutside.module.js

@@ -88,7 +88,12 @@ function $e0b6e0b68ec7f50f$var$isValidEvent(event, ref) {
         // If the target is within a top layer element (e.g. toasts), ignore.
         if (event.target.closest('[data-react-aria-top-layer]')) return false;
     }
-    return ref.current && !ref.current.contains(event.target);
+    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);
 }