{"body":"","parents":["bf55ea743496f4fb71df982af0324e322f25046c"],"patch":"diff --git a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\nindex 6489b8f568..a65c78174d 100644\n--- a\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n+++ b\/packages\/react-debug-tools\/src\/ReactDebugHooks.js\n@@ -52,7 +52,7 @@ type ReactDebugListenerMap = {|\n clear: () => void,\n setListener: (\n target: EventTarget | ReactScopeMethods,\n- callback: ?(Event) => void,\n+ callback: ?(SyntheticEvent) => void,\n ) => void,\n |};\n \ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\nindex 6cf072260d..33cd585846 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMHostConfig.js\n@@ -1216,7 +1216,7 @@ export function unmountEventListener(listener: ReactDOMListener): void {\n \n export function validateEventListenerTarget(\n target: EventTarget | ReactScopeMethods,\n- listener: ?(Event) => void,\n+ listener: ?(SyntheticEvent) => void,\n ): boolean {\n if (enableUseEventAPI) {\n if (\ndiff --git a\/packages\/react-dom\/src\/client\/ReactDOMUseEvent.js b\/packages\/react-dom\/src\/client\/ReactDOMUseEvent.js\nindex 9947b563c9..f1c3145c06 100644\n--- a\/packages\/react-dom\/src\/client\/ReactDOMUseEvent.js\n+++ b\/packages\/react-dom\/src\/client\/ReactDOMUseEvent.js\n@@ -42,9 +42,10 @@ function resolveDispatcher() {\n }\n \n export function useEvent(\n- type: DOMTopLevelEventType,\n+ type: string,\n options?: EventOptions,\n ): ReactDOMListenerMap {\n+ const topLevelType = ((type: any): DOMTopLevelEventType);\n const dispatcher = resolveDispatcher();\n let capture = false;\n let passive = undefined; \/\/ Undefined means to use the browser default\n@@ -66,13 +67,13 @@ export function useEvent(\n }\n }\n if (priority === undefined) {\n- priority = getEventPriorityForListenerSystem(type);\n+ priority = getEventPriorityForListenerSystem(topLevelType);\n }\n const event: ReactDOMListenerEvent = {\n capture,\n passive,\n priority,\n- type,\n+ type: topLevelType,\n };\n return dispatcher.useEvent(event);\n }\ndiff --git a\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js b\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js\nindex 25dc9b0246..18f2cb7dc6 100644\n--- a\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js\n+++ b\/packages\/react-dom\/src\/shared\/ReactDOMTypes.js\n@@ -89,12 +89,12 @@ export type ReactDOMListenerMap = {|\n clear: () => void,\n setListener: (\n target: EventTarget | ReactScopeMethods,\n- callback: ?(Event) => void,\n+ callback: ?(SyntheticEvent) => void,\n ) => void,\n |};\n \n export type ReactDOMListener = {|\n- callback: Event => void,\n+ callback: (SyntheticEvent) => void,\n destroy: Node => void,\n event: ReactDOMListenerEvent,\n target: EventTarget | ReactScopeMethods,\ndiff --git a\/packages\/react-interactions\/events\/deprecated-focus.js b\/packages\/react-interactions\/events\/deprecated-focus.js\nnew file mode 100644\nindex 0000000000..4a65690ca8\n--- \/dev\/null\n+++ b\/packages\/react-interactions\/events\/deprecated-focus.js\n@@ -0,0 +1,10 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+export * from '.\/src\/dom\/DeprecatedFocus';\ndiff --git a\/packages\/react-interactions\/events\/focus.js b\/packages\/react-interactions\/events\/focus.js\nindex 25ed14068a..f77ffc7604 100644\n--- a\/packages\/react-interactions\/events\/focus.js\n+++ b\/packages\/react-interactions\/events\/focus.js\n@@ -7,4 +7,4 @@\n * @flow\n *\/\n \n-export * from '.\/src\/dom\/Focus';\n+export * from '.\/src\/dom\/use-event\/Focus';\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/Focus.js b\/packages\/react-interactions\/events\/src\/dom\/DeprecatedFocus.js\nsimilarity index 100%\nrename from packages\/react-interactions\/events\/src\/dom\/Focus.js\nrename to packages\/react-interactions\/events\/src\/dom\/DeprecatedFocus.js\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/__tests__\/Focus-test.internal.js b\/packages\/react-interactions\/events\/src\/dom\/__tests__\/Focus-test.internal.js\nindex 162e752a85..a7500a1af9 100644\n--- a\/packages\/react-interactions\/events\/src\/dom\/__tests__\/Focus-test.internal.js\n+++ b\/packages\/react-interactions\/events\/src\/dom\/__tests__\/Focus-test.internal.js\n@@ -32,8 +32,9 @@ function initializeModules(hasPointerEvents) {\n \/\/ TODO: This import throws outside of experimental mode. Figure out better\n \/\/ strategy for gated imports.\n if (__EXPERIMENTAL__) {\n- FocusResponder = require('react-interactions\/events\/focus').FocusResponder;\n- useFocus = require('react-interactions\/events\/focus').useFocus;\n+ FocusResponder = require('react-interactions\/events\/deprecated-focus')\n+ .FocusResponder;\n+ useFocus = require('react-interactions\/events\/deprecated-focus').useFocus;\n }\n }\n \ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js b\/packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js\nindex 827fade166..9997c5401d 100644\n--- a\/packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js\n+++ b\/packages\/react-interactions\/events\/src\/dom\/__tests__\/FocusWithin-test.internal.js\n@@ -31,9 +31,10 @@ const initializeModules = hasPointerEvents => {\n \/\/ TODO: This import throws outside of experimental mode. Figure out better\n \/\/ strategy for gated imports.\n if (__EXPERIMENTAL__) {\n- FocusWithinResponder = require('react-interactions\/events\/focus')\n+ FocusWithinResponder = require('react-interactions\/events\/deprecated-focus')\n .FocusWithinResponder;\n- useFocusWithin = require('react-interactions\/events\/focus').useFocusWithin;\n+ useFocusWithin = require('react-interactions\/events\/deprecated-focus')\n+ .useFocusWithin;\n }\n };\n \ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/use-event\/Focus.js b\/packages\/react-interactions\/events\/src\/dom\/use-event\/Focus.js\nnew file mode 100644\nindex 0000000000..9f4f23fb87\n--- \/dev\/null\n+++ b\/packages\/react-interactions\/events\/src\/dom\/use-event\/Focus.js\n@@ -0,0 +1,440 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @flow\n+ *\/\n+\n+import * as React from 'react';\n+import * as ReactDOM from 'react-dom';\n+\n+const useEvent = ReactDOM.unstable_useEvent;\n+const {useEffect, useRef} = React;\n+\n+type UseFocusOptions = {|\n+ disabled?: boolean,\n+ onBlur?: (SyntheticEvent) => void,\n+ onFocus?: (SyntheticEvent) => void,\n+ onFocusChange?: boolean => void,\n+ onFocusVisibleChange?: boolean => void,\n+|};\n+\n+type UseFocusWithinOptions = {|\n+ disabled?: boolean,\n+ onAfterBlurWithin?: (SyntheticEvent) => void,\n+ onBeforeBlurWithin?: (SyntheticEvent) => void,\n+ onBlurWithin?: (SyntheticEvent) => void,\n+ onFocusWithin?: (SyntheticEvent) => void,\n+ onFocusWithinChange?: boolean => void,\n+ onFocusWithinVisibleChange?: boolean => void,\n+|};\n+\n+const isMac =\n+ typeof window !== 'undefined' && window.navigator != null\n+ ? \/^Mac\/.test(window.navigator.platform)\n+ : false;\n+\n+const canUseDOM: boolean = !!(\n+ typeof window !== 'undefined' &&\n+ typeof window.document !== 'undefined' &&\n+ typeof window.document.createElement !== 'undefined'\n+);\n+\n+let passiveBrowserEventsSupported = false;\n+\n+\/\/ Check if browser support events with passive listeners\n+\/\/ https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/EventTarget\/addEventListener#Safely_detecting_option_support\n+if (canUseDOM) {\n+ try {\n+ const options = {};\n+ \/\/ $FlowFixMe: Ignore Flow complaining about needing a value\n+ Object.defineProperty(options, 'passive', {\n+ get: function() {\n+ passiveBrowserEventsSupported = true;\n+ },\n+ });\n+ window.addEventListener('test', options, options);\n+ window.removeEventListener('test', options, options);\n+ } catch (e) {\n+ passiveBrowserEventsSupported = false;\n+ }\n+}\n+\n+const hasPointerEvents =\n+ typeof window !== 'undefined' && window.PointerEvent != null;\n+\n+const globalFocusVisibleEvents = hasPointerEvents\n+ ? ['keydown', 'pointermove', 'pointerdown', 'pointerup']\n+ : ['keydown', 'mousedown', 'touchmove', 'touchstart', 'touchend'];\n+\n+\/\/ Global state for tracking focus visible and emulation of mouse\n+let isGlobalFocusVisible = true;\n+let hasTrackedGlobalFocusVisible = false;\n+let isEmulatingMouseEvents = false;\n+\n+function trackGlobalFocusVisible() {\n+ globalFocusVisibleEvents.forEach(type => {\n+ window.addEventListener(\n+ type,\n+ handleGlobalFocusVisibleEvent,\n+ passiveBrowserEventsSupported ? {capture: true, passive: true} : true,\n+ );\n+ });\n+}\n+\n+function handleGlobalFocusVisibleEvent(\n+ nativeEvent: MouseEvent | TouchEvent | KeyboardEvent,\n+): void {\n+ const {type} = nativeEvent;\n+\n+ switch (type) {\n+ case 'pointermove':\n+ case 'pointerdown':\n+ case 'pointerup': {\n+ isGlobalFocusVisible = false;\n+ break;\n+ }\n+\n+ case 'keydown': {\n+ const {metaKey, altKey, ctrlKey} = nativeEvent;\n+ const validKey = !(metaKey || (!isMac && altKey) || ctrlKey);\n+\n+ if (validKey) {\n+ isGlobalFocusVisible = true;\n+ }\n+ break;\n+ }\n+\n+ \/\/ fallbacks for no PointerEvent support\n+ case 'touchmove':\n+ case 'touchstart':\n+ case 'touchend': {\n+ isEmulatingMouseEvents = true;\n+ isGlobalFocusVisible = false;\n+ break;\n+ }\n+ case 'mousedown': {\n+ if (!isEmulatingMouseEvents) {\n+ isGlobalFocusVisible = false;\n+ } else {\n+ isEmulatingMouseEvents = false;\n+ }\n+ break;\n+ }\n+ }\n+}\n+\n+const passiveObject = {passive: true};\n+\n+function handleFocusVisibleTargetEvent(\n+ type: string,\n+ focusTarget: EventTarget,\n+ callback: boolean => void,\n+): void {\n+ isGlobalFocusVisible = false;\n+\n+ \/\/ Focus should stop being visible if a pointer is used on the element\n+ \/\/ after it was focused using a keyboard.\n+ if (\n+ focusTarget !== null &&\n+ (type === 'mousedown' || type === 'touchstart' || type === 'pointerdown')\n+ ) {\n+ callback(false);\n+ }\n+}\n+\n+function handleFocusVisibleTargetEvents(\n+ event: SyntheticEvent,\n+ focusTarget,\n+ callback,\n+): void {\n+ const {type} = event;\n+\n+ switch (type) {\n+ case 'pointermove':\n+ case 'pointerdown':\n+ case 'pointerup': {\n+ handleFocusVisibleTargetEvent(type, focusTarget, callback);\n+ break;\n+ }\n+\n+ case 'keydown':\n+ case 'keyup': {\n+ const {metaKey, altKey, ctrlKey} = (event: any);\n+ const validKey = !(metaKey || (!isMac && altKey) || ctrlKey);\n+\n+ if (validKey) {\n+ if (focusTarget !== null) {\n+ callback(true);\n+ }\n+ }\n+ break;\n+ }\n+\n+ \/\/ fallbacks for no PointerEvent support\n+ case 'touchmove':\n+ case 'touchstart':\n+ case 'touchend': {\n+ handleFocusVisibleTargetEvent(type, focusTarget, callback);\n+ break;\n+ }\n+ case 'mousedown': {\n+ if (!isEmulatingMouseEvents) {\n+ handleFocusVisibleTargetEvent(type, focusTarget, callback);\n+ }\n+ break;\n+ }\n+ }\n+}\n+\n+function isRelatedTargetWithin(\n+ focusWithinTarget: Node,\n+ relatedTarget: null | Node,\n+): boolean {\n+ if (relatedTarget == null) {\n+ return false;\n+ }\n+ \/\/ To support experimental scopes, which can be the target:\n+ const containsNode = (focusWithinTarget: any).containsNode;\n+ if (typeof containsNode === 'function') {\n+ return containsNode(relatedTarget);\n+ }\n+ return focusWithinTarget.contains(relatedTarget);\n+}\n+\n+function setFocusVisibleListeners(focusVisibleHandles, focusTarget, callback) {\n+ focusVisibleHandles.forEach(focusVisibleHandle => {\n+ focusVisibleHandle.setListener(focusTarget, event =>\n+ handleFocusVisibleTargetEvents(event, focusTarget, callback),\n+ );\n+ });\n+}\n+\n+function useFocusVisibleInputHandles() {\n+ return [\n+ useEvent('mousedown', passiveObject),\n+ useEvent(hasPointerEvents ? 'pointerdown' : 'touchstart', passiveObject),\n+ useEvent(hasPointerEvents ? 'pointermove' : 'touchmove', passiveObject),\n+ useEvent(hasPointerEvents ? 'pointerup' : 'touchend', passiveObject),\n+ useEvent('keydown', passiveObject),\n+ ];\n+}\n+\n+function useFocusLifecycles(stateRef) {\n+ useEffect(() => {\n+ if (!hasTrackedGlobalFocusVisible) {\n+ hasTrackedGlobalFocusVisible = true;\n+ trackGlobalFocusVisible();\n+ }\n+ }, []);\n+}\n+\n+export function useFocus(\n+ focusTargetRef: {current: null | Node},\n+ {\n+ disabled,\n+ onBlur,\n+ onFocus,\n+ onFocusChange,\n+ onFocusVisibleChange,\n+ }: UseFocusOptions,\n+): void {\n+ \/\/ Setup controlled state for this useFocus hook\n+ const stateRef = useRef({isFocused: false, isFocusVisible: false});\n+ const focusHandle = useEvent('focus', passiveObject);\n+ const blurHandle = useEvent('blur', passiveObject);\n+ const focusVisibleHandles = useFocusVisibleInputHandles();\n+\n+ useEffect(() => {\n+ const focusTarget = focusTargetRef.current;\n+ const state = stateRef.current;\n+\n+ if (focusTarget !== null && state !== null) {\n+ \/\/ Handle focus visible\n+ setFocusVisibleListeners(\n+ focusVisibleHandles,\n+ focusTarget,\n+ isFocusVisible => {\n+ if (state.isFocused && state.isFocusVisible !== isFocusVisible) {\n+ state.isFocusVisible = isFocusVisible;\n+ if (onFocusVisibleChange) {\n+ onFocusVisibleChange(isFocusVisible);\n+ }\n+ }\n+ },\n+ );\n+\n+ \/\/ Handle focus\n+ focusHandle.setListener(focusTarget, event => {\n+ if (disabled) {\n+ return;\n+ }\n+ \/\/ Limit focus events to the direct child of the event component.\n+ \/\/ Browser focus is not expected to bubble.\n+ if (!state.isFocused && focusTarget === event.target) {\n+ state.isFocused = true;\n+ state.isFocusVisible = isGlobalFocusVisible;\n+ if (onFocus) {\n+ onFocus(event);\n+ }\n+ if (onFocusChange) {\n+ onFocusChange(true);\n+ }\n+ if (state.isFocusVisible && onFocusVisibleChange) {\n+ onFocusVisibleChange(true);\n+ }\n+ isEmulatingMouseEvents = false;\n+ }\n+ });\n+\n+ \/\/ Handle blur\n+ blurHandle.setListener(focusTarget, event => {\n+ if (disabled) {\n+ return;\n+ }\n+ if (state.isFocused) {\n+ state.isFocused = false;\n+ state.isFocusVisible = isGlobalFocusVisible;\n+ if (onBlur) {\n+ onBlur(event);\n+ }\n+ if (onFocusChange) {\n+ onFocusChange(false);\n+ }\n+ if (state.isFocusVisible && onFocusVisibleChange) {\n+ onFocusVisibleChange(false);\n+ }\n+ }\n+ isEmulatingMouseEvents = false;\n+ });\n+ }\n+ }, [disabled, onBlur, onFocus, onFocusChange, onFocusVisibleChange]);\n+\n+ \/\/ Mount\/Unmount logic\n+ useFocusLifecycles(stateRef);\n+}\n+\n+export function useFocusWithin(\n+ focusWithinTargetRef: {current: null | Node},\n+ {\n+ disabled,\n+ onAfterBlurWithin,\n+ onBeforeBlurWithin,\n+ onBlurWithin,\n+ onFocusWithin,\n+ onFocusWithinChange,\n+ onFocusWithinVisibleChange,\n+ }: UseFocusWithinOptions,\n+) {\n+ \/\/ Setup controlled state for this useFocus hook\n+ const stateRef = useRef({isFocused: false, isFocusVisible: false});\n+ const focusHandle = useEvent('focus', passiveObject);\n+ const blurHandle = useEvent('blur', passiveObject);\n+ const afterBlurHandle = useEvent('afterblur', passiveObject);\n+ const beforeBlurHandle = useEvent('beforeblur', passiveObject);\n+ const focusVisibleHandles = useFocusVisibleInputHandles();\n+\n+ useEffect(() => {\n+ const focusWithinTarget = focusWithinTargetRef.current;\n+ const state = stateRef.current;\n+\n+ if (focusWithinTarget !== null && state !== null) {\n+ \/\/ Handle focus visible\n+ setFocusVisibleListeners(\n+ focusVisibleHandles,\n+ focusWithinTarget,\n+ isFocusVisible => {\n+ if (state.isFocused && state.isFocusVisible !== isFocusVisible) {\n+ state.isFocusVisible = isFocusVisible;\n+ if (onFocusWithinVisibleChange) {\n+ onFocusWithinVisibleChange(isFocusVisible);\n+ }\n+ }\n+ },\n+ );\n+\n+ \/\/ Handle focus\n+ focusHandle.setListener(focusWithinTarget, event => {\n+ if (disabled) {\n+ return;\n+ }\n+ if (!state.isFocused) {\n+ state.isFocused = true;\n+ state.isFocusVisible = isGlobalFocusVisible;\n+ if (onFocusWithinChange) {\n+ onFocusWithinChange(true);\n+ }\n+ if (state.isFocusVisible && onFocusWithinVisibleChange) {\n+ onFocusWithinVisibleChange(true);\n+ }\n+ }\n+ if (!state.isFocusVisible && isGlobalFocusVisible) {\n+ state.isFocusVisible = isGlobalFocusVisible;\n+ if (onFocusWithinVisibleChange) {\n+ onFocusWithinVisibleChange(true);\n+ }\n+ }\n+ if (onFocusWithin) {\n+ onFocusWithin(event);\n+ }\n+ isEmulatingMouseEvents = false;\n+ });\n+\n+ \/\/ Handle blur\n+ blurHandle.setListener(focusWithinTarget, event => {\n+ if (disabled) {\n+ return;\n+ }\n+ const {relatedTarget} = (event: any);\n+\n+ if (\n+ state.isFocused &&\n+ !isRelatedTargetWithin(focusWithinTarget, relatedTarget)\n+ ) {\n+ state.isFocused = false;\n+ if (onFocusWithinChange) {\n+ onFocusWithinChange(false);\n+ }\n+ if (state.isFocusVisible && onFocusWithinVisibleChange) {\n+ onFocusWithinVisibleChange(false);\n+ }\n+ if (onBlurWithin) {\n+ onBlurWithin(event);\n+ }\n+ }\n+ isEmulatingMouseEvents = false;\n+ });\n+\n+ \/\/ Handle before blur. This is a special\n+ \/\/ React provided event.\n+ beforeBlurHandle.setListener(focusWithinTarget, event => {\n+ if (disabled) {\n+ return;\n+ }\n+ if (onBeforeBlurWithin) {\n+ onBeforeBlurWithin(event);\n+ \/\/ Add an \"afterblur\" listener on document. This is a special\n+ \/\/ React provided event.\n+ afterBlurHandle.setListener(document, afterBlurEvent => {\n+ if (onAfterBlurWithin) {\n+ onAfterBlurWithin(afterBlurEvent);\n+ }\n+ \/\/ Clear listener on document\n+ afterBlurHandle.setListener(document, null);\n+ });\n+ }\n+ });\n+ }\n+ }, [\n+ disabled,\n+ onBlurWithin,\n+ onFocusWithin,\n+ onFocusWithinChange,\n+ onFocusWithinVisibleChange,\n+ ]);\n+\n+ \/\/ Mount\/Unmount logic\n+ useFocusLifecycles(stateRef);\n+}\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocus-test.internal.js b\/packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocus-test.internal.js\nnew file mode 100644\nindex 0000000000..f49594f2b1\n--- \/dev\/null\n+++ b\/packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocus-test.internal.js\n@@ -0,0 +1,319 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';\n+\n+let React;\n+let ReactFeatureFlags;\n+let ReactDOM;\n+let useFocus;\n+\n+function initializeModules(hasPointerEvents) {\n+ setPointerEvent(hasPointerEvents);\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags.enableModernEventSystem = true;\n+ ReactFeatureFlags.enableUseEventAPI = true;\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+\n+ \/\/ TODO: This import throws outside of experimental mode. Figure out better\n+ \/\/ strategy for gated imports.\n+ if (__EXPERIMENTAL__) {\n+ useFocus = require('react-interactions\/events\/focus').useFocus;\n+ }\n+}\n+\n+const forcePointerEvents = true;\n+const table = [[forcePointerEvents], [!forcePointerEvents]];\n+\n+describe.each(table)(`useFocus`, hasPointerEvents => {\n+ let container;\n+\n+ beforeEach(() => {\n+ initializeModules(hasPointerEvents);\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ ReactDOM.render(null, container);\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ describe('disabled', () => {\n+ let onBlur, onFocus, ref;\n+\n+ const componentInit = () => {\n+ onBlur = jest.fn();\n+ onFocus = jest.fn();\n+ ref = React.createRef();\n+ const Component = () => {\n+ useFocus(ref, {\n+ disabled: true,\n+ onBlur,\n+ onFocus,\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+ };\n+\n+ \/\/ @gate experimental\n+ it('does not call callbacks', () => {\n+ componentInit();\n+ const target = createEventTarget(ref.current);\n+ target.focus();\n+ target.blur();\n+ expect(onFocus).not.toBeCalled();\n+ expect(onBlur).not.toBeCalled();\n+ });\n+ });\n+\n+ describe('onBlur', () => {\n+ let onBlur, ref;\n+\n+ const componentInit = () => {\n+ onBlur = jest.fn();\n+ ref = React.createRef();\n+ const Component = () => {\n+ useFocus(ref, {\n+ onBlur,\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+ };\n+\n+ \/\/ @gate experimental\n+ it('is called after \"blur\" event', () => {\n+ componentInit();\n+ const target = createEventTarget(ref.current);\n+ target.focus();\n+ target.blur();\n+ expect(onBlur).toHaveBeenCalledTimes(1);\n+ });\n+ });\n+\n+ describe('onFocus', () => {\n+ let onFocus, ref, innerRef;\n+\n+ const componentInit = () => {\n+ onFocus = jest.fn();\n+ ref = React.createRef();\n+ innerRef = React.createRef();\n+ const Component = () => {\n+ useFocus(ref, {\n+ onFocus,\n+ });\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ };\n+ ReactDOM.render(, container);\n+ };\n+\n+ \/\/ @gate experimental\n+ it('is called after \"focus\" event', () => {\n+ componentInit();\n+ const target = createEventTarget(ref.current);\n+ target.focus();\n+ expect(onFocus).toHaveBeenCalledTimes(1);\n+ });\n+\n+ \/\/ @gate experimental\n+ it('is not called if descendants of target receive focus', () => {\n+ componentInit();\n+ const target = createEventTarget(innerRef.current);\n+ target.focus();\n+ expect(onFocus).not.toBeCalled();\n+ });\n+ });\n+\n+ describe('onFocusChange', () => {\n+ let onFocusChange, ref, innerRef;\n+\n+ const componentInit = () => {\n+ onFocusChange = jest.fn();\n+ ref = React.createRef();\n+ innerRef = React.createRef();\n+ const Component = () => {\n+ useFocus(ref, {\n+ onFocusChange,\n+ });\n+ return (\n+

\n+

\n+ <\/div>\n+ );\n+ };\n+ ReactDOM.render(, container);\n+ };\n+\n+ \/\/ @gate experimental\n+ it('is called after \"blur\" and \"focus\" events', () => {\n+ componentInit();\n+ const target = createEventTarget(ref.current);\n+ target.focus();\n+ expect(onFocusChange).toHaveBeenCalledTimes(1);\n+ expect(onFocusChange).toHaveBeenCalledWith(true);\n+ target.blur();\n+ expect(onFocusChange).toHaveBeenCalledTimes(2);\n+ expect(onFocusChange).toHaveBeenCalledWith(false);\n+ });\n+\n+ \/\/ @gate experimental\n+ it('is not called after \"blur\" and \"focus\" events on descendants', () => {\n+ componentInit();\n+ const target = createEventTarget(innerRef.current);\n+ target.focus();\n+ expect(onFocusChange).toHaveBeenCalledTimes(0);\n+ target.blur();\n+ expect(onFocusChange).toHaveBeenCalledTimes(0);\n+ });\n+ });\n+\n+ describe('onFocusVisibleChange', () => {\n+ let onFocusVisibleChange, ref, innerRef;\n+\n+ const componentInit = () => {\n+ onFocusVisibleChange = jest.fn();\n+ ref = React.createRef();\n+ innerRef = React.createRef();\n+ const Component = () => {\n+ useFocus(ref, {\n+ onFocusVisibleChange,\n+ });\n+ return (\n+

\n+

;\n+ };\n+\n+ const Outer = () => {\n+ useFocus(outerRef, {\n+ onBlur: createEventHandler('outer: onBlur'),\n+ onFocus: createEventHandler('outer: onFocus'),\n+ onFocusChange: createEventHandler('outer: onFocusChange'),\n+ });\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ };\n+\n+ ReactDOM.render(, container);\n+\n+ const innerTarget = createEventTarget(innerRef.current);\n+ const outerTarget = createEventTarget(outerRef.current);\n+\n+ outerTarget.focus();\n+ outerTarget.blur();\n+ innerTarget.focus();\n+ innerTarget.blur();\n+ expect(events).toEqual([\n+ 'outer: onFocus',\n+ 'outer: onFocusChange',\n+ 'outer: onBlur',\n+ 'outer: onFocusChange',\n+ 'inner: onFocus',\n+ 'inner: onFocusChange',\n+ 'inner: onBlur',\n+ 'inner: onFocusChange',\n+ ]);\n+ });\n+ });\n+});\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocusWithin-test.internal.js b\/packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocusWithin-test.internal.js\nnew file mode 100644\nindex 0000000000..416830c455\n--- \/dev\/null\n+++ b\/packages\/react-interactions\/events\/src\/dom\/use-event\/__tests__\/useFocusWithin-test.internal.js\n@@ -0,0 +1,467 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\n+ * @emails react-core\n+ *\/\n+\n+'use strict';\n+\n+import {createEventTarget, setPointerEvent} from 'dom-event-testing-library';\n+\n+let React;\n+let ReactFeatureFlags;\n+let ReactDOM;\n+let useFocusWithin;\n+let ReactTestRenderer;\n+let act;\n+\n+function initializeModules(hasPointerEvents) {\n+ setPointerEvent(hasPointerEvents);\n+ jest.resetModules();\n+ ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n+ ReactFeatureFlags.enableScopeAPI = true;\n+ ReactFeatureFlags.enableModernEventSystem = true;\n+ ReactFeatureFlags.enableUseEventAPI = true;\n+ React = require('react');\n+ ReactDOM = require('react-dom');\n+ ReactTestRenderer = require('react-test-renderer');\n+ act = ReactTestRenderer.act;\n+\n+ \/\/ TODO: This import throws outside of experimental mode. Figure out better\n+ \/\/ strategy for gated imports.\n+ if (__EXPERIMENTAL__) {\n+ useFocusWithin = require('react-interactions\/events\/focus').useFocusWithin;\n+ }\n+}\n+\n+const forcePointerEvents = true;\n+const table = [[forcePointerEvents], [!forcePointerEvents]];\n+\n+describe.each(table)(`useFocus`, hasPointerEvents => {\n+ let container;\n+\n+ beforeEach(() => {\n+ initializeModules(hasPointerEvents);\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ });\n+\n+ afterEach(() => {\n+ ReactDOM.render(null, container);\n+ document.body.removeChild(container);\n+ container = null;\n+ });\n+\n+ describe('disabled', () => {\n+ let onFocusWithinChange, onFocusWithinVisibleChange, ref;\n+\n+ const componentInit = () => {\n+ onFocusWithinChange = jest.fn();\n+ onFocusWithinVisibleChange = jest.fn();\n+ ref = React.createRef();\n+ const Component = () => {\n+ useFocusWithin(ref, {\n+ disabled: true,\n+ onFocusWithinChange,\n+ onFocusWithinVisibleChange,\n+ });\n+ return

;\n+ };\n+ ReactDOM.render(, container);\n+ };\n+\n+ \/\/ @gate experimental\n+ it('prevents custom events being dispatched', () => {\n+ componentInit();\n+ const target = createEventTarget(ref.current);\n+ target.focus();\n+ target.blur();\n+ expect(onFocusWithinChange).not.toBeCalled();\n+ expect(onFocusWithinVisibleChange).not.toBeCalled();\n+ });\n+ });\n+\n+ describe('onFocusWithinChange', () => {\n+ let onFocusWithinChange, ref, innerRef, innerRef2;\n+\n+ const Component = ({show}) => {\n+ useFocusWithin(ref, {\n+ onFocusWithinChange,\n+ });\n+ return (\n+

\n+ \n+ <\/div>\n+ )}\n+

\n+ <\/div>\n+ );\n+ };\n+\n+ ReactDOM.render(, container);\n+\n+ const inner = innerRef.current;\n+ const target = createEventTarget(inner);\n+ target.keydown({key: 'Tab'});\n+ target.focus();\n+ expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);\n+ expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);\n+ ReactDOM.render(, container);\n+ expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);\n+ expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);\n+ expect(onAfterBlurWithin).toHaveBeenCalledWith(\n+ expect.objectContaining({relatedTarget: inner}),\n+ );\n+ });\n+\n+ \/\/ @gate experimental\n+ it('is called after a nested focused element is unmounted (with scope query)', () => {\n+ const TestScope = React.unstable_createScope();\n+ const testScopeQuery = (type, props) => true;\n+ let targetNodes;\n+ let targetNode;\n+\n+ const Component = ({show}) => {\n+ const scopeRef = React.useRef(null);\n+ useFocusWithin(scopeRef, {\n+ onBeforeBlurWithin(event) {\n+ const scope = scopeRef.current;\n+ targetNode = innerRef.current;\n+ targetNodes = scope.DO_NOT_USE_queryAllNodes(testScopeQuery);\n+ },\n+ });\n+\n+ return (\n+ \n+ {show && }\n+ <\/TestScope>\n+ );\n+ };\n+\n+ ReactDOM.render(, container);\n+\n+ const inner = innerRef.current;\n+ const target = createEventTarget(inner);\n+ target.keydown({key: 'Tab'});\n+ target.focus();\n+ ReactDOM.render(, container);\n+ expect(targetNodes).toEqual([targetNode]);\n+ });\n+\n+ \/\/ @gate experimental\n+ it('is called after a focused suspended element is hidden', () => {\n+ const Suspense = React.Suspense;\n+ let suspend = false;\n+ let resolve;\n+ const promise = new Promise(resolvePromise => (resolve = resolvePromise));\n+\n+ function Child() {\n+ if (suspend) {\n+ throw promise;\n+ } else {\n+ return ;\n+ }\n+ }\n+\n+ const Component = ({show}) => {\n+ useFocusWithin(ref, {\n+ onBeforeBlurWithin,\n+ onAfterBlurWithin,\n+ });\n+\n+ return (\n+

\n+ \n+ \n+ <\/Suspense>\n+ <\/div>\n+ );\n+ };\n+\n+ const container2 = document.createElement('div');\n+ document.body.appendChild(container2);\n+\n+ const root = ReactDOM.createRoot(container2);\n+\n+ act(() => {\n+ root.render();\n+ });\n+ jest.runAllTimers();\n+ expect(container2.innerHTML).toBe('

<\/div>');\n+\n+ const inner = innerRef.current;\n+ const target = createEventTarget(inner);\n+ target.keydown({key: 'Tab'});\n+ target.focus();\n+ expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);\n+ expect(onAfterBlurWithin).toHaveBeenCalledTimes(0);\n+\n+ suspend = true;\n+ act(() => {\n+ root.render();\n+ });\n+ jest.runAllTimers();\n+ expect(container2.innerHTML).toBe(\n+ '

dillon1000/react

Files changed