@react-aria/interactions 3.22.5 → 3.24.0

package/dist/useFocusVisible.module.js

@@ -1,3 +1,4 @@
+import {ignoreFocusEvent as $8a9cb279dc87e130$export$fda7da73ab5d4c48} from "./utils.module.js";
 import {isMac as $28AnR$isMac, isVirtualClick as $28AnR$isVirtualClick, getOwnerWindow as $28AnR$getOwnerWindow, getOwnerDocument as $28AnR$getOwnerDocument} from "@react-aria/utils";
 import {useState as $28AnR$useState, useEffect as $28AnR$useEffect} from "react";
 import {useIsSSR as $28AnR$useIsSSR} from "@react-aria/ssr";
@@ -19,6 +20,7 @@ import {useIsSSR as $28AnR$useIsSSR} from "@react-aria/ssr";
 
 
 
+
 let $507fabe10e71c6fb$var$currentModality = null;
 let $507fabe10e71c6fb$var$changeHandlers = new Set();
 let $507fabe10e71c6fb$export$d90243b58daecda7 = new Map(); // We use a map here to support setting event listeners across multiple document objects.
@@ -62,7 +64,7 @@ function $507fabe10e71c6fb$var$handleFocusEvent(e) {
     // Firefox fires two extra focus events when the user first clicks into an iframe:
     // first on the window, then on the document. We ignore these events so they don't
     // cause keyboard focus rings to appear.
-    if (e.target === window || e.target === document) return;
+    if (e.target === window || e.target === document || (0, $8a9cb279dc87e130$export$fda7da73ab5d4c48) || !e.isTrusted) return;
     // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
     // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
     if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) {
@@ -73,6 +75,7 @@ function $507fabe10e71c6fb$var$handleFocusEvent(e) {
     $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
 }
 function $507fabe10e71c6fb$var$handleWindowBlur() {
+    if (0, $8a9cb279dc87e130$export$fda7da73ab5d4c48) return;
     // When the window is blurred, reset state. This is necessary when tabbing out of the window,
     // for example, since a subsequent focus event won't be fired.
     $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
@@ -195,12 +198,14 @@ const $507fabe10e71c6fb$var$nonTextInputTypes = new Set([
  * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that
  * focus visible style can be properly set.
  */ function $507fabe10e71c6fb$var$isKeyboardFocusEvent(isTextInput, modality, e) {
-    var _e_target;
+    let document1 = (0, $28AnR$getOwnerDocument)(e === null || e === void 0 ? void 0 : e.target);
     const IHTMLInputElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLInputElement : HTMLInputElement;
     const IHTMLTextAreaElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLTextAreaElement : HTMLTextAreaElement;
     const IHTMLElement = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).HTMLElement : HTMLElement;
     const IKeyboardEvent = typeof window !== 'undefined' ? (0, $28AnR$getOwnerWindow)(e === null || e === void 0 ? void 0 : e.target).KeyboardEvent : KeyboardEvent;
-    isTextInput = isTextInput || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(e === null || e === void 0 ? void 0 : (_e_target = e.target) === null || _e_target === void 0 ? void 0 : _e_target.type) || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLTextAreaElement || (e === null || e === void 0 ? void 0 : e.target) instanceof IHTMLElement && (e === null || e === void 0 ? void 0 : e.target.isContentEditable);
+    // For keyboard events that occur on a non-input element that will move focus into input element (aka ArrowLeft going from Datepicker button to the main input group)
+    // we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element
+    isTextInput = isTextInput || document1.activeElement instanceof IHTMLInputElement && !$507fabe10e71c6fb$var$nonTextInputTypes.has(document1.activeElement.type) || document1.activeElement instanceof IHTMLTextAreaElement || document1.activeElement instanceof IHTMLElement && document1.activeElement.isContentEditable;
     return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !$507fabe10e71c6fb$var$FOCUS_VISIBLE_INPUT_KEYS[e.key]);
 }
 function $507fabe10e71c6fb$export$ffd9e5021c1fb2d6(props = {}) {
@@ -221,6 +226,7 @@ function $507fabe10e71c6fb$export$ec71b4b83ac08ec3(fn, deps, opts) {
     $507fabe10e71c6fb$var$setupGlobalFocusEvents();
     (0, $28AnR$useEffect)(()=>{
         let handler = (modality, e)=>{
+            // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
             if (!$507fabe10e71c6fb$var$isKeyboardFocusEvent(!!(opts === null || opts === void 0 ? void 0 : opts.isTextInput), modality, e)) return;
             fn($507fabe10e71c6fb$export$b9b3dfddab17db27());
         };

package/dist/useFocusVisible.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/interactions/src/useFocusVisible.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, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';\nimport {useEffect, useState} from 'react';\nimport {useIsSSR} from '@react-aria/ssr';\n\nexport type Modality = 'keyboard' | 'pointer' | 'virtual';\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null;\ntype Handler = (modality: Modality, e: HandlerEvent) => void;\nexport type FocusVisibleHandler = (isFocusVisible: boolean) => void;\nexport interface FocusVisibleProps {\n  /** Whether the element is a text input. */\n  isTextInput?: boolean,\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean\n}\n\nexport interface FocusVisibleResult {\n  /** Whether keyboard focus is visible globally. */\n  isFocusVisible: boolean\n}\n\nlet currentModality: null | Modality = null;\nlet changeHandlers = new Set<Handler>();\ninterface GlobalListenerData {\n  focus: () => void\n}\nexport let hasSetupGlobalListeners = new Map<Window, GlobalListenerData>(); // We use a map here to support setting event listeners across multiple document objects.\nlet hasEventBeforeFocus = false;\nlet hasBlurredWindowRecently = false;\n\n// Only Tab or Esc keys will make focus visible on text input elements\nconst FOCUS_VISIBLE_INPUT_KEYS = {\n  Tab: true,\n  Escape: true\n};\n\nfunction triggerChangeHandlers(modality: Modality, e: HandlerEvent) {\n  for (let handler of changeHandlers) {\n    handler(modality, e);\n  }\n}\n\n/**\n * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.\n */\nfunction isValidKey(e: KeyboardEvent) {\n  // Control and Shift keys trigger when navigating back to the tab with keyboard.\n  return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');\n}\n\n\nfunction handleKeyboardEvent(e: KeyboardEvent) {\n  hasEventBeforeFocus = true;\n  if (isValidKey(e)) {\n    currentModality = 'keyboard';\n    triggerChangeHandlers('keyboard', e);\n  }\n}\n\nfunction handlePointerEvent(e: PointerEvent | MouseEvent) {\n  currentModality = 'pointer';\n  if (e.type === 'mousedown' || e.type === 'pointerdown') {\n    hasEventBeforeFocus = true;\n    triggerChangeHandlers('pointer', e);\n  }\n}\n\nfunction handleClickEvent(e: MouseEvent) {\n  if (isVirtualClick(e)) {\n    hasEventBeforeFocus = true;\n    currentModality = 'virtual';\n  }\n}\n\nfunction handleFocusEvent(e: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (e.target === window || e.target === document) {\n    return;\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n    currentModality = 'virtual';\n    triggerChangeHandlers('virtual', e);\n  }\n\n  hasEventBeforeFocus = false;\n  hasBlurredWindowRecently = false;\n}\n\nfunction handleWindowBlur() {\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false;\n  hasBlurredWindowRecently = true;\n}\n\n/**\n * Setup global event listeners to control when keyboard focus style should be visible.\n */\nfunction setupGlobalFocusEvents(element?: HTMLElement | null) {\n  if (typeof window === 'undefined' || hasSetupGlobalListeners.get(getOwnerWindow(element))) {\n    return;\n  }\n\n  const windowObject = getOwnerWindow(element);\n  const documentObject = getOwnerDocument(element);\n\n  // Programmatic focus() calls shouldn't affect the current input modality.\n  // However, we need to detect other cases when a focus event occurs without\n  // a preceding user event (e.g. screen reader focus). Overriding the focus\n  // method on HTMLElement.prototype is a bit hacky, but works.\n  let focus = windowObject.HTMLElement.prototype.focus;\n  windowObject.HTMLElement.prototype.focus = function () {\n    hasEventBeforeFocus = true;\n    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);\n  };\n\n  documentObject.addEventListener('keydown', handleKeyboardEvent, true);\n  documentObject.addEventListener('keyup', handleKeyboardEvent, true);\n  documentObject.addEventListener('click', handleClickEvent, true);\n\n  // Register focus events on the window so they are sure to happen\n  // before React's event listeners (registered on the document).\n  windowObject.addEventListener('focus', handleFocusEvent, true);\n  windowObject.addEventListener('blur', handleWindowBlur, false);\n\n  if (typeof PointerEvent !== 'undefined') {\n    documentObject.addEventListener('pointerdown', handlePointerEvent, true);\n    documentObject.addEventListener('pointermove', handlePointerEvent, true);\n    documentObject.addEventListener('pointerup', handlePointerEvent, true);\n  } else {\n    documentObject.addEventListener('mousedown', handlePointerEvent, true);\n    documentObject.addEventListener('mousemove', handlePointerEvent, true);\n    documentObject.addEventListener('mouseup', handlePointerEvent, true);\n  }\n\n  // Add unmount handler\n  windowObject.addEventListener('beforeunload', () => {\n    tearDownWindowFocusTracking(element);\n  }, {once: true});\n\n  hasSetupGlobalListeners.set(windowObject, {focus});\n}\n\nconst tearDownWindowFocusTracking = (element, loadListener?: () => void) => {\n  const windowObject = getOwnerWindow(element);\n  const documentObject = getOwnerDocument(element);\n  if (loadListener) {\n    documentObject.removeEventListener('DOMContentLoaded', loadListener);\n  }\n  if (!hasSetupGlobalListeners.has(windowObject)) {\n    return;\n  }\n  windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject)!.focus;\n\n  documentObject.removeEventListener('keydown', handleKeyboardEvent, true);\n  documentObject.removeEventListener('keyup', handleKeyboardEvent, true);\n  documentObject.removeEventListener('click', handleClickEvent, true);\n  windowObject.removeEventListener('focus', handleFocusEvent, true);\n  windowObject.removeEventListener('blur', handleWindowBlur, false);\n\n  if (typeof PointerEvent !== 'undefined') {\n    documentObject.removeEventListener('pointerdown', handlePointerEvent, true);\n    documentObject.removeEventListener('pointermove', handlePointerEvent, true);\n    documentObject.removeEventListener('pointerup', handlePointerEvent, true);\n  } else {\n    documentObject.removeEventListener('mousedown', handlePointerEvent, true);\n    documentObject.removeEventListener('mousemove', handlePointerEvent, true);\n    documentObject.removeEventListener('mouseup', handlePointerEvent, true);\n  }\n\n  hasSetupGlobalListeners.delete(windowObject);\n};\n\n/**\n * EXPERIMENTAL\n * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.\n *\n * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus\n * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,\n * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an\n * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.\n * Note, you do not need to call this for the default window, as we call it for you.\n *\n * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function\n * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned\n * up automatically for you.\n *\n * @param element @default document.body - The element provided will be used to get the window to add.\n * @returns A function to remove the event listeners and cleanup the state.\n */\nexport function addWindowFocusTracking(element?: HTMLElement | null): () => void {\n  const documentObject = getOwnerDocument(element);\n  let loadListener;\n  if (documentObject.readyState !== 'loading') {\n    setupGlobalFocusEvents(element);\n  } else {\n    loadListener = () => {\n      setupGlobalFocusEvents(element);\n    };\n    documentObject.addEventListener('DOMContentLoaded', loadListener);\n  }\n\n  return () => tearDownWindowFocusTracking(element, loadListener);\n}\n\n// Server-side rendering does not have the document object defined\n// eslint-disable-next-line no-restricted-globals\nif (typeof document !== 'undefined') {\n  addWindowFocusTracking();\n}\n\n/**\n * If true, keyboard focus is visible.\n */\nexport function isFocusVisible(): boolean {\n  return currentModality !== 'pointer';\n}\n\nexport function getInteractionModality(): Modality | null {\n  return currentModality;\n}\n\nexport function setInteractionModality(modality: Modality) {\n  currentModality = modality;\n  triggerChangeHandlers(modality, null);\n}\n\n/**\n * Keeps state of the current modality.\n */\nexport function useInteractionModality(): Modality | null {\n  setupGlobalFocusEvents();\n\n  let [modality, setModality] = useState(currentModality);\n  useEffect(() => {\n    let handler = () => {\n      setModality(currentModality);\n    };\n\n    changeHandlers.add(handler);\n    return () => {\n      changeHandlers.delete(handler);\n    };\n  }, []);\n\n  return useIsSSR() ? null : modality;\n}\n\nconst nonTextInputTypes = new Set([\n  'checkbox',\n  'radio',\n  'range',\n  'color',\n  'file',\n  'image',\n  'button',\n  'submit',\n  'reset'\n]);\n\n/**\n * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that\n * focus visible style can be properly set.\n */\nfunction isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {\n  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLInputElement : HTMLInputElement;\n  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement;\n  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLElement : HTMLElement;\n  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).KeyboardEvent : KeyboardEvent;\n\n  isTextInput = isTextInput ||\n    (e?.target instanceof IHTMLInputElement && !nonTextInputTypes.has(e?.target?.type)) ||\n    e?.target instanceof IHTMLTextAreaElement ||\n    (e?.target instanceof IHTMLElement && e?.target.isContentEditable);\n  return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);\n}\n\n/**\n * Manages focus visible state for the page, and subscribes individual components for updates.\n */\nexport function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {\n  let {isTextInput, autoFocus} = props;\n  let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());\n  useFocusVisibleListener((isFocusVisible) => {\n    setFocusVisible(isFocusVisible);\n  }, [isTextInput], {isTextInput});\n\n  return {isFocusVisible: isFocusVisibleState};\n}\n\n/**\n * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).\n */\nexport function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {isTextInput?: boolean}): void {\n  setupGlobalFocusEvents();\n\n  useEffect(() => {\n    let handler = (modality: Modality, e: HandlerEvent) => {\n      if (!isKeyboardFocusEvent(!!(opts?.isTextInput), modality, e)) {\n        return;\n      }\n      fn(isFocusVisible());\n    };\n    changeHandlers.add(handler);\n    return () => {\n      changeHandlers.delete(handler);\n    };\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n"],"names":[],"version":3,"file":"useFocusVisible.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/interactions/src/useFocusVisible.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, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';\nimport {ignoreFocusEvent} from './utils';\nimport {useEffect, useState} from 'react';\nimport {useIsSSR} from '@react-aria/ssr';\n\nexport type Modality = 'keyboard' | 'pointer' | 'virtual';\ntype HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null;\ntype Handler = (modality: Modality, e: HandlerEvent) => void;\nexport type FocusVisibleHandler = (isFocusVisible: boolean) => void;\nexport interface FocusVisibleProps {\n  /** Whether the element is a text input. */\n  isTextInput?: boolean,\n  /** Whether the element will be auto focused. */\n  autoFocus?: boolean\n}\n\nexport interface FocusVisibleResult {\n  /** Whether keyboard focus is visible globally. */\n  isFocusVisible: boolean\n}\n\nlet currentModality: null | Modality = null;\nlet changeHandlers = new Set<Handler>();\ninterface GlobalListenerData {\n  focus: () => void\n}\nexport let hasSetupGlobalListeners = new Map<Window, GlobalListenerData>(); // We use a map here to support setting event listeners across multiple document objects.\nlet hasEventBeforeFocus = false;\nlet hasBlurredWindowRecently = false;\n\n// Only Tab or Esc keys will make focus visible on text input elements\nconst FOCUS_VISIBLE_INPUT_KEYS = {\n  Tab: true,\n  Escape: true\n};\n\nfunction triggerChangeHandlers(modality: Modality, e: HandlerEvent) {\n  for (let handler of changeHandlers) {\n    handler(modality, e);\n  }\n}\n\n/**\n * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.\n */\nfunction isValidKey(e: KeyboardEvent) {\n  // Control and Shift keys trigger when navigating back to the tab with keyboard.\n  return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');\n}\n\n\nfunction handleKeyboardEvent(e: KeyboardEvent) {\n  hasEventBeforeFocus = true;\n  if (isValidKey(e)) {\n    currentModality = 'keyboard';\n    triggerChangeHandlers('keyboard', e);\n  }\n}\n\nfunction handlePointerEvent(e: PointerEvent | MouseEvent) {\n  currentModality = 'pointer';\n  if (e.type === 'mousedown' || e.type === 'pointerdown') {\n    hasEventBeforeFocus = true;\n    triggerChangeHandlers('pointer', e);\n  }\n}\n\nfunction handleClickEvent(e: MouseEvent) {\n  if (isVirtualClick(e)) {\n    hasEventBeforeFocus = true;\n    currentModality = 'virtual';\n  }\n}\n\nfunction handleFocusEvent(e: FocusEvent) {\n  // Firefox fires two extra focus events when the user first clicks into an iframe:\n  // first on the window, then on the document. We ignore these events so they don't\n  // cause keyboard focus rings to appear.\n  if (e.target === window || e.target === document || ignoreFocusEvent || !e.isTrusted) {\n    return;\n  }\n\n  // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.\n  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.\n  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {\n    currentModality = 'virtual';\n    triggerChangeHandlers('virtual', e);\n  }\n\n  hasEventBeforeFocus = false;\n  hasBlurredWindowRecently = false;\n}\n\nfunction handleWindowBlur() {\n  if (ignoreFocusEvent) {\n    return;\n  }\n\n  // When the window is blurred, reset state. This is necessary when tabbing out of the window,\n  // for example, since a subsequent focus event won't be fired.\n  hasEventBeforeFocus = false;\n  hasBlurredWindowRecently = true;\n}\n\n/**\n * Setup global event listeners to control when keyboard focus style should be visible.\n */\nfunction setupGlobalFocusEvents(element?: HTMLElement | null) {\n  if (typeof window === 'undefined' || hasSetupGlobalListeners.get(getOwnerWindow(element))) {\n    return;\n  }\n\n  const windowObject = getOwnerWindow(element);\n  const documentObject = getOwnerDocument(element);\n\n  // Programmatic focus() calls shouldn't affect the current input modality.\n  // However, we need to detect other cases when a focus event occurs without\n  // a preceding user event (e.g. screen reader focus). Overriding the focus\n  // method on HTMLElement.prototype is a bit hacky, but works.\n  let focus = windowObject.HTMLElement.prototype.focus;\n  windowObject.HTMLElement.prototype.focus = function () {\n    hasEventBeforeFocus = true;\n    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);\n  };\n\n  documentObject.addEventListener('keydown', handleKeyboardEvent, true);\n  documentObject.addEventListener('keyup', handleKeyboardEvent, true);\n  documentObject.addEventListener('click', handleClickEvent, true);\n\n  // Register focus events on the window so they are sure to happen\n  // before React's event listeners (registered on the document).\n  windowObject.addEventListener('focus', handleFocusEvent, true);\n  windowObject.addEventListener('blur', handleWindowBlur, false);\n\n  if (typeof PointerEvent !== 'undefined') {\n    documentObject.addEventListener('pointerdown', handlePointerEvent, true);\n    documentObject.addEventListener('pointermove', handlePointerEvent, true);\n    documentObject.addEventListener('pointerup', handlePointerEvent, true);\n  } else {\n    documentObject.addEventListener('mousedown', handlePointerEvent, true);\n    documentObject.addEventListener('mousemove', handlePointerEvent, true);\n    documentObject.addEventListener('mouseup', handlePointerEvent, true);\n  }\n\n  // Add unmount handler\n  windowObject.addEventListener('beforeunload', () => {\n    tearDownWindowFocusTracking(element);\n  }, {once: true});\n\n  hasSetupGlobalListeners.set(windowObject, {focus});\n}\n\nconst tearDownWindowFocusTracking = (element, loadListener?: () => void) => {\n  const windowObject = getOwnerWindow(element);\n  const documentObject = getOwnerDocument(element);\n  if (loadListener) {\n    documentObject.removeEventListener('DOMContentLoaded', loadListener);\n  }\n  if (!hasSetupGlobalListeners.has(windowObject)) {\n    return;\n  }\n  windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject)!.focus;\n\n  documentObject.removeEventListener('keydown', handleKeyboardEvent, true);\n  documentObject.removeEventListener('keyup', handleKeyboardEvent, true);\n  documentObject.removeEventListener('click', handleClickEvent, true);\n\n  windowObject.removeEventListener('focus', handleFocusEvent, true);\n  windowObject.removeEventListener('blur', handleWindowBlur, false);\n\n  if (typeof PointerEvent !== 'undefined') {\n    documentObject.removeEventListener('pointerdown', handlePointerEvent, true);\n    documentObject.removeEventListener('pointermove', handlePointerEvent, true);\n    documentObject.removeEventListener('pointerup', handlePointerEvent, true);\n  } else {\n    documentObject.removeEventListener('mousedown', handlePointerEvent, true);\n    documentObject.removeEventListener('mousemove', handlePointerEvent, true);\n    documentObject.removeEventListener('mouseup', handlePointerEvent, true);\n  }\n\n  hasSetupGlobalListeners.delete(windowObject);\n};\n\n/**\n * EXPERIMENTAL\n * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.\n *\n * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus\n * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,\n * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an\n * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.\n * Note, you do not need to call this for the default window, as we call it for you.\n *\n * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function\n * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned\n * up automatically for you.\n *\n * @param element @default document.body - The element provided will be used to get the window to add.\n * @returns A function to remove the event listeners and cleanup the state.\n */\nexport function addWindowFocusTracking(element?: HTMLElement | null): () => void {\n  const documentObject = getOwnerDocument(element);\n  let loadListener;\n  if (documentObject.readyState !== 'loading') {\n    setupGlobalFocusEvents(element);\n  } else {\n    loadListener = () => {\n      setupGlobalFocusEvents(element);\n    };\n    documentObject.addEventListener('DOMContentLoaded', loadListener);\n  }\n\n  return () => tearDownWindowFocusTracking(element, loadListener);\n}\n\n// Server-side rendering does not have the document object defined\n// eslint-disable-next-line no-restricted-globals\nif (typeof document !== 'undefined') {\n  addWindowFocusTracking();\n}\n\n/**\n * If true, keyboard focus is visible.\n */\nexport function isFocusVisible(): boolean {\n  return currentModality !== 'pointer';\n}\n\nexport function getInteractionModality(): Modality | null {\n  return currentModality;\n}\n\nexport function setInteractionModality(modality: Modality) {\n  currentModality = modality;\n  triggerChangeHandlers(modality, null);\n}\n\n/**\n * Keeps state of the current modality.\n */\nexport function useInteractionModality(): Modality | null {\n  setupGlobalFocusEvents();\n\n  let [modality, setModality] = useState(currentModality);\n  useEffect(() => {\n    let handler = () => {\n      setModality(currentModality);\n    };\n\n    changeHandlers.add(handler);\n    return () => {\n      changeHandlers.delete(handler);\n    };\n  }, []);\n\n  return useIsSSR() ? null : modality;\n}\n\nconst nonTextInputTypes = new Set([\n  'checkbox',\n  'radio',\n  'range',\n  'color',\n  'file',\n  'image',\n  'button',\n  'submit',\n  'reset'\n]);\n\n/**\n * If this is attached to text input component, return if the event is a focus event (Tab/Escape keys pressed) so that\n * focus visible style can be properly set.\n */\nfunction isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {\n  let document = getOwnerDocument(e?.target as Element);\n  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLInputElement : HTMLInputElement;\n  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLTextAreaElement : HTMLTextAreaElement;\n  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).HTMLElement : HTMLElement;\n  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(e?.target as Element).KeyboardEvent : KeyboardEvent;\n\n  // For keyboard events that occur on a non-input element that will move focus into input element (aka ArrowLeft going from Datepicker button to the main input group)\n  // we need to rely on the user passing isTextInput into here. This way we can skip toggling focus visiblity for said input element\n  isTextInput = isTextInput ||\n    (document.activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(document.activeElement.type)) ||\n    document.activeElement instanceof IHTMLTextAreaElement ||\n    (document.activeElement instanceof IHTMLElement && document.activeElement.isContentEditable);\n  return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);\n}\n\n/**\n * Manages focus visible state for the page, and subscribes individual components for updates.\n */\nexport function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {\n  let {isTextInput, autoFocus} = props;\n  let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());\n  useFocusVisibleListener((isFocusVisible) => {\n    setFocusVisible(isFocusVisible);\n  }, [isTextInput], {isTextInput});\n\n  return {isFocusVisible: isFocusVisibleState};\n}\n\n/**\n * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).\n */\nexport function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {isTextInput?: boolean}): void {\n  setupGlobalFocusEvents();\n\n  useEffect(() => {\n    let handler = (modality: Modality, e: HandlerEvent) => {\n      // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape\n      if (!isKeyboardFocusEvent(!!(opts?.isTextInput), modality, e)) {\n        return;\n      }\n      fn(isFocusVisible());\n    };\n    changeHandlers.add(handler);\n    return () => {\n      changeHandlers.delete(handler);\n    };\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, deps);\n}\n"],"names":[],"version":3,"file":"useFocusVisible.module.js.map"}

package/dist/useFocusWithin.main.js

@@ -1,5 +1,6 @@
 var $625cf83917e112ad$exports = require("./utils.main.js");
 var $kDAhS$react = require("react");
+var $kDAhS$reactariautils = require("@react-aria/utils");
 
 
 function $parcel$export(e, n, v, s) {
@@ -23,43 +24,71 @@ $parcel$export(module.exports, "useFocusWithin", () => $d16842bbd0359d1b$export$
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 
+
 function $d16842bbd0359d1b$export$420e68273165f4ec(props) {
     let { isDisabled: isDisabled, onBlurWithin: onBlurWithin, onFocusWithin: onFocusWithin, onFocusWithinChange: onFocusWithinChange } = props;
     let state = (0, $kDAhS$react.useRef)({
         isFocusWithin: false
     });
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $kDAhS$reactariautils.useGlobalListeners)();
     let onBlur = (0, $kDAhS$react.useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
         // when moving focus inside the element. Only trigger if the currentTarget doesn't
         // include the relatedTarget (where focus is moving).
         if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
             state.current.isFocusWithin = false;
+            removeAllGlobalListeners();
             if (onBlurWithin) onBlurWithin(e);
             if (onFocusWithinChange) onFocusWithinChange(false);
         }
     }, [
         onBlurWithin,
         onFocusWithinChange,
-        state
+        state,
+        removeAllGlobalListeners
     ]);
     let onSyntheticFocus = (0, $625cf83917e112ad$exports.useSyntheticBlurEvent)(onBlur);
     let onFocus = (0, $kDAhS$react.useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // Double check that document.activeElement actually matches e.target in case a previously chained
         // focus handler already moved focus somewhere else.
-        if (!state.current.isFocusWithin && document.activeElement === e.target) {
+        const ownerDocument = (0, $kDAhS$reactariautils.getOwnerDocument)(e.target);
+        const activeElement = (0, $kDAhS$reactariautils.getActiveElement)(ownerDocument);
+        if (!state.current.isFocusWithin && activeElement === (0, $kDAhS$reactariautils.getEventTarget)(e.nativeEvent)) {
             if (onFocusWithin) onFocusWithin(e);
             if (onFocusWithinChange) onFocusWithinChange(true);
             state.current.isFocusWithin = true;
             onSyntheticFocus(e);
+            // Browsers don't fire blur events when elements are removed from the DOM.
+            // However, if a focus event occurs outside the element we're tracking, we
+            // can manually fire onBlur.
+            let currentTarget = e.currentTarget;
+            addGlobalListener(ownerDocument, 'focus', (e)=>{
+                if (state.current.isFocusWithin && !(0, $kDAhS$reactariautils.nodeContains)(currentTarget, e.target)) {
+                    let event = new (0, $625cf83917e112ad$exports.SyntheticFocusEvent)('blur', new ownerDocument.defaultView.FocusEvent('blur', {
+                        relatedTarget: e.target
+                    }));
+                    event.target = currentTarget;
+                    event.currentTarget = currentTarget;
+                    onBlur(event);
+                }
+            }, {
+                capture: true
+            });
         }
     }, [
         onFocusWithin,
         onFocusWithinChange,
-        onSyntheticFocus
+        onSyntheticFocus,
+        addGlobalListener,
+        onBlur
     ]);
     if (isDisabled) return {
         focusWithinProps: {
-            // These should not have been null, that would conflict in mergeProps
+            // These cannot be null, that would conflict in mergeProps
             onFocus: undefined,
             onBlur: undefined
         }

package/dist/useFocusWithin.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,kEAAkE;AAClE,2DAA2D;AAC3D,yDAAyD;AACzD,kHAAkH;;;AAyB3G,SAAS,0CAAe,KAAuB;IACpD,IAAI,cACF,UAAU,gBACV,YAAY,iBACZ,aAAa,uBACb,mBAAmB,EACpB,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,mBAAK,EAAE;QACjB,eAAe;IACjB;IAEA,IAAI,SAAS,CAAA,GAAA,wBAAU,EAAE,CAAC;QACxB,iFAAiF;QACjF,kFAAkF;QAClF,qDAAqD;QACrD,IAAI,MAAM,OAAO,CAAC,aAAa,IAAI,CAAC,AAAC,EAAE,aAAa,CAAa,QAAQ,CAAC,EAAE,aAAa,GAAc;YACrG,MAAM,OAAO,CAAC,aAAa,GAAG;YAE9B,IAAI,cACF,aAAa;YAGf,IAAI,qBACF,oBAAoB;QAExB;IACF,GAAG;QAAC;QAAc;QAAqB;KAAM;IAE7C,IAAI,mBAAmB,CAAA,GAAA,+CAAoB,EAAE;IAC7C,IAAI,UAAU,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,kGAAkG;QAClG,oDAAoD;QACpD,IAAI,CAAC,MAAM,OAAO,CAAC,aAAa,IAAI,SAAS,aAAa,KAAK,EAAE,MAAM,EAAE;YACvE,IAAI,eACF,cAAc;YAGhB,IAAI,qBACF,oBAAoB;YAGtB,MAAM,OAAO,CAAC,aAAa,GAAG;YAC9B,iBAAiB;QACnB;IACF,GAAG;QAAC;QAAe;QAAqB;KAAiB;IAEzD,IAAI,YACF,OAAO;QACL,kBAAkB;YAChB,qEAAqE;YACrE,SAAS;YACT,QAAQ;QACV;IACF;IAGF,OAAO;QACL,kBAAkB;qBAChB;oBACA;QACF;IACF;AACF","sources":["packages/@react-aria/interactions/src/useFocusWithin.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} from '@react-types/shared';\nimport {FocusEvent, useCallback, useRef} from 'react';\nimport {useSyntheticBlurEvent} from './utils';\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: DOMAttributes\n}\n\n/**\n * Handles focus events for the target and its descendants.\n */\nexport function useFocusWithin(props: FocusWithinProps): FocusWithinResult {\n  let {\n    isDisabled,\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  } = props;\n  let state = useRef({\n    isFocusWithin: false\n  });\n\n  let onBlur = useCallback((e: FocusEvent) => {\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {\n      state.current.isFocusWithin = false;\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  }, [onBlurWithin, onFocusWithinChange, state]);\n\n  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);\n  let onFocus = useCallback((e: FocusEvent) => {\n    // Double check that document.activeElement actually matches e.target in case a previously chained\n    // focus handler already moved focus somewhere else.\n    if (!state.current.isFocusWithin && document.activeElement === e.target) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      state.current.isFocusWithin = true;\n      onSyntheticFocus(e);\n    }\n  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus]);\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        // These should not have been null, that would conflict in mergeProps\n        onFocus: undefined,\n        onBlur: undefined\n      }\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useFocusWithin.main.js.map"}
+{"mappings":";;;;;;;;;;AAAA;;;;;;;;;;CAUC,GAED,kEAAkE;AAClE,2DAA2D;AAC3D,yDAAyD;AACzD,kHAAkH;;;;AA0B3G,SAAS,0CAAe,KAAuB;IACpD,IAAI,cACF,UAAU,gBACV,YAAY,iBACZ,aAAa,uBACb,mBAAmB,EACpB,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,mBAAK,EAAE;QACjB,eAAe;IACjB;IAEA,IAAI,qBAAC,iBAAiB,4BAAE,wBAAwB,EAAC,GAAG,CAAA,GAAA,wCAAiB;IAErE,IAAI,SAAS,CAAA,GAAA,wBAAU,EAAE,CAAC;QACxB,0CAA0C;QAC1C,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,iFAAiF;QACjF,kFAAkF;QAClF,qDAAqD;QACrD,IAAI,MAAM,OAAO,CAAC,aAAa,IAAI,CAAC,AAAC,EAAE,aAAa,CAAa,QAAQ,CAAC,EAAE,aAAa,GAAc;YACrG,MAAM,OAAO,CAAC,aAAa,GAAG;YAC9B;YAEA,IAAI,cACF,aAAa;YAGf,IAAI,qBACF,oBAAoB;QAExB;IACF,GAAG;QAAC;QAAc;QAAqB;QAAO;KAAyB;IAEvE,IAAI,mBAAmB,CAAA,GAAA,+CAAoB,EAAE;IAC7C,IAAI,UAAU,CAAA,GAAA,wBAAU,EAAE,CAAC;QACzB,0CAA0C;QAC1C,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,kGAAkG;QAClG,oDAAoD;QACpD,MAAM,gBAAgB,CAAA,GAAA,sCAAe,EAAE,EAAE,MAAM;QAC/C,MAAM,gBAAgB,CAAA,GAAA,sCAAe,EAAE;QACvC,IAAI,CAAC,MAAM,OAAO,CAAC,aAAa,IAAI,kBAAkB,CAAA,GAAA,oCAAa,EAAE,EAAE,WAAW,GAAG;YACnF,IAAI,eACF,cAAc;YAGhB,IAAI,qBACF,oBAAoB;YAGtB,MAAM,OAAO,CAAC,aAAa,GAAG;YAC9B,iBAAiB;YAEjB,0EAA0E;YAC1E,0EAA0E;YAC1E,4BAA4B;YAC5B,IAAI,gBAAgB,EAAE,aAAa;YACnC,kBAAkB,eAAe,SAAS,CAAA;gBACxC,IAAI,MAAM,OAAO,CAAC,aAAa,IAAI,CAAC,CAAA,GAAA,kCAAW,EAAE,eAAe,EAAE,MAAM,GAAc;oBACpF,IAAI,QAAQ,IAAI,CAAA,GAAA,6CAAkB,EAAE,QAAQ,IAAI,cAAc,WAAW,CAAE,UAAU,CAAC,QAAQ;wBAAC,eAAe,EAAE,MAAM;oBAAA;oBACtH,MAAM,MAAM,GAAG;oBACf,MAAM,aAAa,GAAG;oBACtB,OAAO;gBACT;YACF,GAAG;gBAAC,SAAS;YAAI;QACnB;IACF,GAAG;QAAC;QAAe;QAAqB;QAAkB;QAAmB;KAAO;IAEpF,IAAI,YACF,OAAO;QACL,kBAAkB;YAChB,0DAA0D;YAC1D,SAAS;YACT,QAAQ;QACV;IACF;IAGF,OAAO;QACL,kBAAkB;qBAChB;oBACA;QACF;IACF;AACF","sources":["packages/@react-aria/interactions/src/useFocusWithin.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} from '@react-types/shared';\nimport {FocusEvent, useCallback, useRef} from 'react';\nimport {getActiveElement, getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';\nimport {SyntheticFocusEvent, useSyntheticBlurEvent} from './utils';\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: DOMAttributes\n}\n\n/**\n * Handles focus events for the target and its descendants.\n */\nexport function useFocusWithin(props: FocusWithinProps): FocusWithinResult {\n  let {\n    isDisabled,\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  } = props;\n  let state = useRef({\n    isFocusWithin: false\n  });\n\n  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();\n\n  let onBlur = useCallback((e: FocusEvent) => {\n    // Ignore events bubbling through portals.\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {\n      state.current.isFocusWithin = false;\n      removeAllGlobalListeners();\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  }, [onBlurWithin, onFocusWithinChange, state, removeAllGlobalListeners]);\n\n  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);\n  let onFocus = useCallback((e: FocusEvent) => {\n    // Ignore events bubbling through portals.\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // Double check that document.activeElement actually matches e.target in case a previously chained\n    // focus handler already moved focus somewhere else.\n    const ownerDocument = getOwnerDocument(e.target);\n    const activeElement = getActiveElement(ownerDocument);\n    if (!state.current.isFocusWithin && activeElement === getEventTarget(e.nativeEvent)) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      state.current.isFocusWithin = true;\n      onSyntheticFocus(e);\n\n      // Browsers don't fire blur events when elements are removed from the DOM.\n      // However, if a focus event occurs outside the element we're tracking, we\n      // can manually fire onBlur.\n      let currentTarget = e.currentTarget;\n      addGlobalListener(ownerDocument, 'focus', e => {\n        if (state.current.isFocusWithin && !nodeContains(currentTarget, e.target as Element)) {\n          let event = new SyntheticFocusEvent('blur', new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target}));\n          event.target = currentTarget;\n          event.currentTarget = currentTarget;\n          onBlur(event);\n        }\n      }, {capture: true});\n    }\n  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus, addGlobalListener, onBlur]);\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        // These cannot be null, that would conflict in mergeProps\n        onFocus: undefined,\n        onBlur: undefined\n      }\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useFocusWithin.main.js.map"}

package/dist/useFocusWithin.mjs

@@ -1,5 +1,6 @@
-import {useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.mjs";
+import {SyntheticFocusEvent as $8a9cb279dc87e130$export$905e7fc544a71f36, useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.mjs";
 import {useRef as $3b9Q0$useRef, useCallback as $3b9Q0$useCallback} from "react";
+import {useGlobalListeners as $3b9Q0$useGlobalListeners, getOwnerDocument as $3b9Q0$getOwnerDocument, getActiveElement as $3b9Q0$getActiveElement, getEventTarget as $3b9Q0$getEventTarget, nodeContains as $3b9Q0$nodeContains} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -17,43 +18,71 @@ import {useRef as $3b9Q0$useRef, useCallback as $3b9Q0$useCallback} from "react"
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 
+
 function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
     let { isDisabled: isDisabled, onBlurWithin: onBlurWithin, onFocusWithin: onFocusWithin, onFocusWithinChange: onFocusWithinChange } = props;
     let state = (0, $3b9Q0$useRef)({
         isFocusWithin: false
     });
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $3b9Q0$useGlobalListeners)();
     let onBlur = (0, $3b9Q0$useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
         // when moving focus inside the element. Only trigger if the currentTarget doesn't
         // include the relatedTarget (where focus is moving).
         if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
             state.current.isFocusWithin = false;
+            removeAllGlobalListeners();
             if (onBlurWithin) onBlurWithin(e);
             if (onFocusWithinChange) onFocusWithinChange(false);
         }
     }, [
         onBlurWithin,
         onFocusWithinChange,
-        state
+        state,
+        removeAllGlobalListeners
     ]);
     let onSyntheticFocus = (0, $8a9cb279dc87e130$export$715c682d09d639cc)(onBlur);
     let onFocus = (0, $3b9Q0$useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // Double check that document.activeElement actually matches e.target in case a previously chained
         // focus handler already moved focus somewhere else.
-        if (!state.current.isFocusWithin && document.activeElement === e.target) {
+        const ownerDocument = (0, $3b9Q0$getOwnerDocument)(e.target);
+        const activeElement = (0, $3b9Q0$getActiveElement)(ownerDocument);
+        if (!state.current.isFocusWithin && activeElement === (0, $3b9Q0$getEventTarget)(e.nativeEvent)) {
             if (onFocusWithin) onFocusWithin(e);
             if (onFocusWithinChange) onFocusWithinChange(true);
             state.current.isFocusWithin = true;
             onSyntheticFocus(e);
+            // Browsers don't fire blur events when elements are removed from the DOM.
+            // However, if a focus event occurs outside the element we're tracking, we
+            // can manually fire onBlur.
+            let currentTarget = e.currentTarget;
+            addGlobalListener(ownerDocument, 'focus', (e)=>{
+                if (state.current.isFocusWithin && !(0, $3b9Q0$nodeContains)(currentTarget, e.target)) {
+                    let event = new (0, $8a9cb279dc87e130$export$905e7fc544a71f36)('blur', new ownerDocument.defaultView.FocusEvent('blur', {
+                        relatedTarget: e.target
+                    }));
+                    event.target = currentTarget;
+                    event.currentTarget = currentTarget;
+                    onBlur(event);
+                }
+            }, {
+                capture: true
+            });
         }
     }, [
         onFocusWithin,
         onFocusWithinChange,
-        onSyntheticFocus
+        onSyntheticFocus,
+        addGlobalListener,
+        onBlur
     ]);
     if (isDisabled) return {
         focusWithinProps: {
-            // These should not have been null, that would conflict in mergeProps
+            // These cannot be null, that would conflict in mergeProps
             onFocus: undefined,
             onBlur: undefined
         }

package/dist/useFocusWithin.module.js

@@ -1,5 +1,6 @@
-import {useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.module.js";
+import {SyntheticFocusEvent as $8a9cb279dc87e130$export$905e7fc544a71f36, useSyntheticBlurEvent as $8a9cb279dc87e130$export$715c682d09d639cc} from "./utils.module.js";
 import {useRef as $3b9Q0$useRef, useCallback as $3b9Q0$useCallback} from "react";
+import {useGlobalListeners as $3b9Q0$useGlobalListeners, getOwnerDocument as $3b9Q0$getOwnerDocument, getActiveElement as $3b9Q0$getActiveElement, getEventTarget as $3b9Q0$getEventTarget, nodeContains as $3b9Q0$nodeContains} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -17,43 +18,71 @@ import {useRef as $3b9Q0$useRef, useCallback as $3b9Q0$useCallback} from "react"
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
 
+
 function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
     let { isDisabled: isDisabled, onBlurWithin: onBlurWithin, onFocusWithin: onFocusWithin, onFocusWithinChange: onFocusWithinChange } = props;
     let state = (0, $3b9Q0$useRef)({
         isFocusWithin: false
     });
+    let { addGlobalListener: addGlobalListener, removeAllGlobalListeners: removeAllGlobalListeners } = (0, $3b9Q0$useGlobalListeners)();
     let onBlur = (0, $3b9Q0$useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // We don't want to trigger onBlurWithin and then immediately onFocusWithin again
         // when moving focus inside the element. Only trigger if the currentTarget doesn't
         // include the relatedTarget (where focus is moving).
         if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
             state.current.isFocusWithin = false;
+            removeAllGlobalListeners();
             if (onBlurWithin) onBlurWithin(e);
             if (onFocusWithinChange) onFocusWithinChange(false);
         }
     }, [
         onBlurWithin,
         onFocusWithinChange,
-        state
+        state,
+        removeAllGlobalListeners
     ]);
     let onSyntheticFocus = (0, $8a9cb279dc87e130$export$715c682d09d639cc)(onBlur);
     let onFocus = (0, $3b9Q0$useCallback)((e)=>{
+        // Ignore events bubbling through portals.
+        if (!e.currentTarget.contains(e.target)) return;
         // Double check that document.activeElement actually matches e.target in case a previously chained
         // focus handler already moved focus somewhere else.
-        if (!state.current.isFocusWithin && document.activeElement === e.target) {
+        const ownerDocument = (0, $3b9Q0$getOwnerDocument)(e.target);
+        const activeElement = (0, $3b9Q0$getActiveElement)(ownerDocument);
+        if (!state.current.isFocusWithin && activeElement === (0, $3b9Q0$getEventTarget)(e.nativeEvent)) {
             if (onFocusWithin) onFocusWithin(e);
             if (onFocusWithinChange) onFocusWithinChange(true);
             state.current.isFocusWithin = true;
             onSyntheticFocus(e);
+            // Browsers don't fire blur events when elements are removed from the DOM.
+            // However, if a focus event occurs outside the element we're tracking, we
+            // can manually fire onBlur.
+            let currentTarget = e.currentTarget;
+            addGlobalListener(ownerDocument, 'focus', (e)=>{
+                if (state.current.isFocusWithin && !(0, $3b9Q0$nodeContains)(currentTarget, e.target)) {
+                    let event = new (0, $8a9cb279dc87e130$export$905e7fc544a71f36)('blur', new ownerDocument.defaultView.FocusEvent('blur', {
+                        relatedTarget: e.target
+                    }));
+                    event.target = currentTarget;
+                    event.currentTarget = currentTarget;
+                    onBlur(event);
+                }
+            }, {
+                capture: true
+            });
         }
     }, [
         onFocusWithin,
         onFocusWithinChange,
-        onSyntheticFocus
+        onSyntheticFocus,
+        addGlobalListener,
+        onBlur
     ]);
     if (isDisabled) return {
         focusWithinProps: {
-            // These should not have been null, that would conflict in mergeProps
+            // These cannot be null, that would conflict in mergeProps
             onFocus: undefined,
             onBlur: undefined
         }

package/dist/useFocusWithin.module.js.map

@@ -1 +1 @@
-{"mappings":";;;AAAA;;;;;;;;;;CAUC,GAED,kEAAkE;AAClE,2DAA2D;AAC3D,yDAAyD;AACzD,kHAAkH;;;AAyB3G,SAAS,0CAAe,KAAuB;IACpD,IAAI,cACF,UAAU,gBACV,YAAY,iBACZ,aAAa,uBACb,mBAAmB,EACpB,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,aAAK,EAAE;QACjB,eAAe;IACjB;IAEA,IAAI,SAAS,CAAA,GAAA,kBAAU,EAAE,CAAC;QACxB,iFAAiF;QACjF,kFAAkF;QAClF,qDAAqD;QACrD,IAAI,MAAM,OAAO,CAAC,aAAa,IAAI,CAAC,AAAC,EAAE,aAAa,CAAa,QAAQ,CAAC,EAAE,aAAa,GAAc;YACrG,MAAM,OAAO,CAAC,aAAa,GAAG;YAE9B,IAAI,cACF,aAAa;YAGf,IAAI,qBACF,oBAAoB;QAExB;IACF,GAAG;QAAC;QAAc;QAAqB;KAAM;IAE7C,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE;IAC7C,IAAI,UAAU,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,kGAAkG;QAClG,oDAAoD;QACpD,IAAI,CAAC,MAAM,OAAO,CAAC,aAAa,IAAI,SAAS,aAAa,KAAK,EAAE,MAAM,EAAE;YACvE,IAAI,eACF,cAAc;YAGhB,IAAI,qBACF,oBAAoB;YAGtB,MAAM,OAAO,CAAC,aAAa,GAAG;YAC9B,iBAAiB;QACnB;IACF,GAAG;QAAC;QAAe;QAAqB;KAAiB;IAEzD,IAAI,YACF,OAAO;QACL,kBAAkB;YAChB,qEAAqE;YACrE,SAAS;YACT,QAAQ;QACV;IACF;IAGF,OAAO;QACL,kBAAkB;qBAChB;oBACA;QACF;IACF;AACF","sources":["packages/@react-aria/interactions/src/useFocusWithin.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} from '@react-types/shared';\nimport {FocusEvent, useCallback, useRef} from 'react';\nimport {useSyntheticBlurEvent} from './utils';\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: DOMAttributes\n}\n\n/**\n * Handles focus events for the target and its descendants.\n */\nexport function useFocusWithin(props: FocusWithinProps): FocusWithinResult {\n  let {\n    isDisabled,\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  } = props;\n  let state = useRef({\n    isFocusWithin: false\n  });\n\n  let onBlur = useCallback((e: FocusEvent) => {\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {\n      state.current.isFocusWithin = false;\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  }, [onBlurWithin, onFocusWithinChange, state]);\n\n  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);\n  let onFocus = useCallback((e: FocusEvent) => {\n    // Double check that document.activeElement actually matches e.target in case a previously chained\n    // focus handler already moved focus somewhere else.\n    if (!state.current.isFocusWithin && document.activeElement === e.target) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      state.current.isFocusWithin = true;\n      onSyntheticFocus(e);\n    }\n  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus]);\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        // These should not have been null, that would conflict in mergeProps\n        onFocus: undefined,\n        onBlur: undefined\n      }\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useFocusWithin.module.js.map"}
+{"mappings":";;;;AAAA;;;;;;;;;;CAUC,GAED,kEAAkE;AAClE,2DAA2D;AAC3D,yDAAyD;AACzD,kHAAkH;;;;AA0B3G,SAAS,0CAAe,KAAuB;IACpD,IAAI,cACF,UAAU,gBACV,YAAY,iBACZ,aAAa,uBACb,mBAAmB,EACpB,GAAG;IACJ,IAAI,QAAQ,CAAA,GAAA,aAAK,EAAE;QACjB,eAAe;IACjB;IAEA,IAAI,qBAAC,iBAAiB,4BAAE,wBAAwB,EAAC,GAAG,CAAA,GAAA,yBAAiB;IAErE,IAAI,SAAS,CAAA,GAAA,kBAAU,EAAE,CAAC;QACxB,0CAA0C;QAC1C,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,iFAAiF;QACjF,kFAAkF;QAClF,qDAAqD;QACrD,IAAI,MAAM,OAAO,CAAC,aAAa,IAAI,CAAC,AAAC,EAAE,aAAa,CAAa,QAAQ,CAAC,EAAE,aAAa,GAAc;YACrG,MAAM,OAAO,CAAC,aAAa,GAAG;YAC9B;YAEA,IAAI,cACF,aAAa;YAGf,IAAI,qBACF,oBAAoB;QAExB;IACF,GAAG;QAAC;QAAc;QAAqB;QAAO;KAAyB;IAEvE,IAAI,mBAAmB,CAAA,GAAA,yCAAoB,EAAE;IAC7C,IAAI,UAAU,CAAA,GAAA,kBAAU,EAAE,CAAC;QACzB,0CAA0C;QAC1C,IAAI,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,EAAE,MAAM,GACpC;QAGF,kGAAkG;QAClG,oDAAoD;QACpD,MAAM,gBAAgB,CAAA,GAAA,uBAAe,EAAE,EAAE,MAAM;QAC/C,MAAM,gBAAgB,CAAA,GAAA,uBAAe,EAAE;QACvC,IAAI,CAAC,MAAM,OAAO,CAAC,aAAa,IAAI,kBAAkB,CAAA,GAAA,qBAAa,EAAE,EAAE,WAAW,GAAG;YACnF,IAAI,eACF,cAAc;YAGhB,IAAI,qBACF,oBAAoB;YAGtB,MAAM,OAAO,CAAC,aAAa,GAAG;YAC9B,iBAAiB;YAEjB,0EAA0E;YAC1E,0EAA0E;YAC1E,4BAA4B;YAC5B,IAAI,gBAAgB,EAAE,aAAa;YACnC,kBAAkB,eAAe,SAAS,CAAA;gBACxC,IAAI,MAAM,OAAO,CAAC,aAAa,IAAI,CAAC,CAAA,GAAA,mBAAW,EAAE,eAAe,EAAE,MAAM,GAAc;oBACpF,IAAI,QAAQ,IAAI,CAAA,GAAA,yCAAkB,EAAE,QAAQ,IAAI,cAAc,WAAW,CAAE,UAAU,CAAC,QAAQ;wBAAC,eAAe,EAAE,MAAM;oBAAA;oBACtH,MAAM,MAAM,GAAG;oBACf,MAAM,aAAa,GAAG;oBACtB,OAAO;gBACT;YACF,GAAG;gBAAC,SAAS;YAAI;QACnB;IACF,GAAG;QAAC;QAAe;QAAqB;QAAkB;QAAmB;KAAO;IAEpF,IAAI,YACF,OAAO;QACL,kBAAkB;YAChB,0DAA0D;YAC1D,SAAS;YACT,QAAQ;QACV;IACF;IAGF,OAAO;QACL,kBAAkB;qBAChB;oBACA;QACF;IACF;AACF","sources":["packages/@react-aria/interactions/src/useFocusWithin.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} from '@react-types/shared';\nimport {FocusEvent, useCallback, useRef} from 'react';\nimport {getActiveElement, getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';\nimport {SyntheticFocusEvent, useSyntheticBlurEvent} from './utils';\n\nexport interface FocusWithinProps {\n  /** Whether the focus within events should be disabled. */\n  isDisabled?: boolean,\n  /** Handler that is called when the target element or a descendant receives focus. */\n  onFocusWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the target element and all descendants lose focus. */\n  onBlurWithin?: (e: FocusEvent) => void,\n  /** Handler that is called when the the focus within state changes. */\n  onFocusWithinChange?: (isFocusWithin: boolean) => void\n}\n\nexport interface FocusWithinResult {\n  /** Props to spread onto the target element. */\n  focusWithinProps: DOMAttributes\n}\n\n/**\n * Handles focus events for the target and its descendants.\n */\nexport function useFocusWithin(props: FocusWithinProps): FocusWithinResult {\n  let {\n    isDisabled,\n    onBlurWithin,\n    onFocusWithin,\n    onFocusWithinChange\n  } = props;\n  let state = useRef({\n    isFocusWithin: false\n  });\n\n  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();\n\n  let onBlur = useCallback((e: FocusEvent) => {\n    // Ignore events bubbling through portals.\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // We don't want to trigger onBlurWithin and then immediately onFocusWithin again\n    // when moving focus inside the element. Only trigger if the currentTarget doesn't\n    // include the relatedTarget (where focus is moving).\n    if (state.current.isFocusWithin && !(e.currentTarget as Element).contains(e.relatedTarget as Element)) {\n      state.current.isFocusWithin = false;\n      removeAllGlobalListeners();\n\n      if (onBlurWithin) {\n        onBlurWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(false);\n      }\n    }\n  }, [onBlurWithin, onFocusWithinChange, state, removeAllGlobalListeners]);\n\n  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);\n  let onFocus = useCallback((e: FocusEvent) => {\n    // Ignore events bubbling through portals.\n    if (!e.currentTarget.contains(e.target)) {\n      return;\n    }\n\n    // Double check that document.activeElement actually matches e.target in case a previously chained\n    // focus handler already moved focus somewhere else.\n    const ownerDocument = getOwnerDocument(e.target);\n    const activeElement = getActiveElement(ownerDocument);\n    if (!state.current.isFocusWithin && activeElement === getEventTarget(e.nativeEvent)) {\n      if (onFocusWithin) {\n        onFocusWithin(e);\n      }\n\n      if (onFocusWithinChange) {\n        onFocusWithinChange(true);\n      }\n\n      state.current.isFocusWithin = true;\n      onSyntheticFocus(e);\n\n      // Browsers don't fire blur events when elements are removed from the DOM.\n      // However, if a focus event occurs outside the element we're tracking, we\n      // can manually fire onBlur.\n      let currentTarget = e.currentTarget;\n      addGlobalListener(ownerDocument, 'focus', e => {\n        if (state.current.isFocusWithin && !nodeContains(currentTarget, e.target as Element)) {\n          let event = new SyntheticFocusEvent('blur', new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: e.target}));\n          event.target = currentTarget;\n          event.currentTarget = currentTarget;\n          onBlur(event);\n        }\n      }, {capture: true});\n    }\n  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus, addGlobalListener, onBlur]);\n\n  if (isDisabled) {\n    return {\n      focusWithinProps: {\n        // These cannot be null, that would conflict in mergeProps\n        onFocus: undefined,\n        onBlur: undefined\n      }\n    };\n  }\n\n  return {\n    focusWithinProps: {\n      onFocus,\n      onBlur\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useFocusWithin.module.js.map"}

package/dist/useFocusable.main.js

@@ -0,0 +1,112 @@
+var $2833058fcd3993f5$exports = require("./focusSafely.main.js");
+var $5cb73d0ce355b0dc$exports = require("./useFocus.main.js");
+var $892d64db2a3c53b0$exports = require("./useKeyboard.main.js");
+var $cvQje$reactariautils = require("@react-aria/utils");
+var $cvQje$react = require("react");
+
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+
+$parcel$export(module.exports, "FocusableContext", () => $15f8fd80892557ff$export$f9762fab77588ecb);
+$parcel$export(module.exports, "FocusableProvider", () => $15f8fd80892557ff$export$13f3202a3e5ddd5);
+$parcel$export(module.exports, "useFocusable", () => $15f8fd80892557ff$export$4c014de7c8940b4c);
+$parcel$export(module.exports, "Focusable", () => $15f8fd80892557ff$export$35a3bebf7ef2d934);
+/*
+ * 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 $15f8fd80892557ff$export$f9762fab77588ecb = /*#__PURE__*/ (0, ($parcel$interopDefault($cvQje$react))).createContext(null);
+function $15f8fd80892557ff$var$useFocusableContext(ref) {
+    let context = (0, $cvQje$react.useContext)($15f8fd80892557ff$export$f9762fab77588ecb) || {};
+    (0, $cvQje$reactariautils.useSyncRef)(context, ref);
+    // eslint-disable-next-line
+    let { ref: _, ...otherProps } = context;
+    return otherProps;
+}
+const $15f8fd80892557ff$export$13f3202a3e5ddd5 = /*#__PURE__*/ (0, ($parcel$interopDefault($cvQje$react))).forwardRef(function FocusableProvider(props, ref) {
+    let { children: children, ...otherProps } = props;
+    let objRef = (0, $cvQje$reactariautils.useObjectRef)(ref);
+    let context = {
+        ...otherProps,
+        ref: objRef
+    };
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($cvQje$react))).createElement($15f8fd80892557ff$export$f9762fab77588ecb.Provider, {
+        value: context
+    }, children);
+});
+function $15f8fd80892557ff$export$4c014de7c8940b4c(props, domRef) {
+    let { focusProps: focusProps } = (0, $5cb73d0ce355b0dc$exports.useFocus)(props);
+    let { keyboardProps: keyboardProps } = (0, $892d64db2a3c53b0$exports.useKeyboard)(props);
+    let interactions = (0, $cvQje$reactariautils.mergeProps)(focusProps, keyboardProps);
+    let domProps = $15f8fd80892557ff$var$useFocusableContext(domRef);
+    let interactionProps = props.isDisabled ? {} : domProps;
+    let autoFocusRef = (0, $cvQje$react.useRef)(props.autoFocus);
+    (0, $cvQje$react.useEffect)(()=>{
+        if (autoFocusRef.current && domRef.current) (0, $2833058fcd3993f5$exports.focusSafely)(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, $cvQje$reactariautils.mergeProps)({
+            ...interactions,
+            tabIndex: tabIndex
+        }, interactionProps)
+    };
+}
+const $15f8fd80892557ff$export$35a3bebf7ef2d934 = /*#__PURE__*/ (0, $cvQje$react.forwardRef)(({ children: children, ...props }, ref)=>{
+    ref = (0, $cvQje$reactariautils.useObjectRef)(ref);
+    let { focusableProps: focusableProps } = $15f8fd80892557ff$export$4c014de7c8940b4c(props, ref);
+    let child = (0, ($parcel$interopDefault($cvQje$react))).Children.only(children);
+    (0, $cvQje$react.useEffect)(()=>{
+        let el = ref.current;
+        if (!el || !(el instanceof (0, $cvQje$reactariautils.getOwnerWindow)(el).Element)) {
+            console.error('<Focusable> child must forward its ref to a DOM element.');
+            return;
+        }
+        if (!props.isDisabled && !(0, $cvQje$reactariautils.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, ($parcel$interopDefault($cvQje$react))).version, 10) < 19 ? child.ref : child.props.ref;
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($cvQje$react))).cloneElement(child, {
+        ...(0, $cvQje$reactariautils.mergeProps)(focusableProps, child.props),
+        // @ts-ignore
+        ref: (0, $cvQje$reactariautils.mergeRefs)(childRef, ref)
+    });
+});
+
+
+//# sourceMappingURL=useFocusable.main.js.map

package/dist/useFocusable.main.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.main.js.map"}