{"parents":["bf09089f64cec31680b0bb63b2ebaa81e210c492"],"commit":{"authorName":"Josh Story","shortRevision":"a8a83f7a59","revision":"a8a83f7a5996b86f3901d5dc505b13506dd12caf","authorEmail":"story@hey.com","authoredAt":"2024-04-10T09:18:33-07:00","subject":"Removes the react-interactions project which is unused (#28799)"},"files":[{"path":"packages\/react-interactions\/README.md","status":"D"},{"path":"packages\/react-interactions\/events\/focus.js","status":"D"},{"path":"packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js","status":"D"},{"path":"packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocus-test.internal.js","status":"D"},{"path":"packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocusWithin-test.internal.js","status":"D"},{"path":"packages\/react-interactions\/events\/src\/dom\/create-event-handle\/useEvent.js","status":"D"},{"path":"packages\/react-interactions\/npm\/drag.js","status":"D"},{"path":"packages\/react-interactions\/npm\/focus.js","status":"D"},{"path":"packages\/react-interactions\/npm\/hover.js","status":"D"},{"path":"packages\/react-interactions\/npm\/input.js","status":"D"},{"path":"packages\/react-interactions\/npm\/press-legacy.js","status":"D"},{"path":"packages\/react-interactions\/npm\/press.js","status":"D"},{"path":"packages\/react-interactions\/npm\/scroll.js","status":"D"},{"path":"packages\/react-interactions\/npm\/swipe.js","status":"D"},{"path":"packages\/react-interactions\/npm\/tap.js","status":"D"},{"path":"packages\/react-interactions\/package.json","status":"D"}],"body":"Removes the react-interactions project which is unused\r\n\r\nThis project uses `unstable_createEventHandle` which is being removed\r\nfrom React in version 19","patch":"diff --git a\/packages\/react-interactions\/README.md b\/packages\/react-interactions\/README.md\ndeleted file mode 100644\nindex 2326ed26c5..0000000000\n--- a\/packages\/react-interactions\/README.md\n+++ \/dev\/null\n@@ -1,4 +0,0 @@\n-# `react-interactions`\n-\n-This package is experimental. It is intended for use with the experimental React\n-flags for internal testing.\n\\ No newline at end of file\ndiff --git a\/packages\/react-interactions\/events\/focus.js b\/packages\/react-interactions\/events\/focus.js\ndeleted file mode 100644\nindex c4421b2eda..0000000000\n--- a\/packages\/react-interactions\/events\/focus.js\n+++ \/dev\/null\n@@ -1,10 +0,0 @@\n-\/**\n- * Copyright (c) Meta Platforms, Inc. and 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\/create-event-handle\/Focus';\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js b\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js\ndeleted file mode 100644\nindex e6cb7302e7..0000000000\n--- a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/Focus.js\n+++ \/dev\/null\n@@ -1,400 +0,0 @@\n-\/**\n- * Copyright (c) Meta Platforms, Inc. and 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 useEvent from '.\/useEvent';\n-\n-const {useCallback, useEffect, useLayoutEffect, useRef} = React;\n-\n-type FocusEvent = SyntheticEvent;\n-\n-type UseFocusOptions = {\n- disabled?: boolean,\n- onBlur?: ?(FocusEvent) => void,\n- onFocus?: ?(FocusEvent) => void,\n- onFocusChange?: ?(boolean) => void,\n- onFocusVisibleChange?: ?(boolean) => void,\n-};\n-\n-type UseFocusWithinOptions = {\n- disabled?: boolean,\n- onAfterBlurWithin?: FocusEvent => void,\n- onBeforeBlurWithin?: FocusEvent => void,\n- onBlurWithin?: FocusEvent => void,\n- onFocusWithin?: FocusEvent => 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 hasPointerEvents =\n- typeof window !== 'undefined' && window.PointerEvent != null;\n-\n-const globalFocusVisibleEvents = hasPointerEvents\n- ? ['keydown', 'pointermove', 'pointerdown', 'pointerup']\n- : [\n- 'keydown',\n- 'mousedown',\n- 'mousemove',\n- 'mouseup',\n- 'touchmove',\n- 'touchstart',\n- 'touchend',\n- ];\n-\n-\/\/ Global state for tracking focus visible and emulation of mouse\n-let isGlobalFocusVisible = true;\n-let hasTrackedGlobalFocusVisible = false;\n-\n-function trackGlobalFocusVisible() {\n- globalFocusVisibleEvents.forEach(type => {\n- window.addEventListener(type, handleGlobalFocusVisibleEvent, true);\n- });\n-}\n-\n-function isValidKey(nativeEvent: KeyboardEvent): boolean {\n- const {metaKey, altKey, ctrlKey} = nativeEvent;\n- return !(metaKey || (!isMac && altKey) || ctrlKey);\n-}\n-\n-function isTextInput(nativeEvent: KeyboardEvent): boolean {\n- const {key, target} = nativeEvent;\n- if (key === 'Tab' || key === 'Escape') {\n- return false;\n- }\n- const {isContentEditable, tagName} = (target: any);\n- return tagName === 'INPUT' || tagName === 'TEXTAREA' || isContentEditable;\n-}\n-\n-function handleGlobalFocusVisibleEvent(\n- nativeEvent: MouseEvent | TouchEvent | KeyboardEvent,\n-): void {\n- if (nativeEvent.type === 'keydown') {\n- if (isValidKey(((nativeEvent: any): KeyboardEvent))) {\n- isGlobalFocusVisible = true;\n- }\n- } else {\n- const nodeName = (nativeEvent.target: any).nodeName;\n- \/\/ Safari calls mousemove\/pointermove events when you tab out of the active\n- \/\/ Safari frame.\n- if (nodeName === 'HTML') {\n- return;\n- }\n- \/\/ Handle all the other mouse\/touch\/pointer events\n- isGlobalFocusVisible = false;\n- }\n-}\n-\n-function handleFocusVisibleTargetEvents(\n- event: SyntheticEvent,\n- callback: boolean => void,\n-): void {\n- if (event.type === 'keydown') {\n- const {nativeEvent} = (event: any);\n- if (isValidKey(nativeEvent) && !isTextInput(nativeEvent)) {\n- callback(true);\n- }\n- } else {\n- callback(false);\n- }\n-}\n-\n-function isRelatedTargetWithin(\n- focusWithinTarget: Object,\n- relatedTarget: null | EventTarget,\n-): boolean {\n- if (relatedTarget == null) {\n- return false;\n- }\n- \/\/ As the focusWithinTarget can be a Scope Instance (experimental API),\n- \/\/ we need to use the containsNode() method. Otherwise, focusWithinTarget\n- \/\/ must be a Node, which means we can use the contains() method.\n- return typeof focusWithinTarget.containsNode === 'function'\n- ? focusWithinTarget.containsNode(relatedTarget)\n- : focusWithinTarget.contains(relatedTarget);\n-}\n-\n-function setFocusVisibleListeners(\n- \/\/ $FlowFixMe[missing-local-annot]\n- focusVisibleHandles,\n- focusTarget: EventTarget,\n- callback: boolean => void,\n-) {\n- focusVisibleHandles.forEach(focusVisibleHandle => {\n- focusVisibleHandle.setListener(focusTarget, event =>\n- handleFocusVisibleTargetEvents(event, callback),\n- );\n- });\n-}\n-\n-function useFocusVisibleInputHandles() {\n- return [\n- useEvent('mousedown'),\n- useEvent(hasPointerEvents ? 'pointerdown' : 'touchstart'),\n- useEvent('keydown'),\n- ];\n-}\n-\n-function useFocusLifecycles() {\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('focusin');\n- const blurHandle = useEvent('focusout');\n- const focusVisibleHandles = useFocusVisibleInputHandles();\n-\n- useLayoutEffect(() => {\n- const focusTarget = focusTargetRef.current;\n- const state = stateRef.current;\n-\n- if (focusTarget !== null && state !== null && focusTarget.nodeType === 1) {\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: FocusEvent) => {\n- if (disabled === true) {\n- return;\n- }\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- }\n- });\n-\n- \/\/ Handle blur\n- blurHandle.setListener(focusTarget, (event: FocusEvent) => {\n- if (disabled === true) {\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- });\n- }\n- }, [\n- blurHandle,\n- disabled,\n- focusHandle,\n- focusTargetRef,\n- focusVisibleHandles,\n- onBlur,\n- onFocus,\n- onFocusChange,\n- onFocusVisibleChange,\n- ]);\n-\n- \/\/ Mount\/Unmount logic\n- useFocusLifecycles();\n-}\n-\n-export function useFocusWithin(\n- focusWithinTargetRef:\n- | {current: null | T}\n- | ((focusWithinTarget: null | T) => void),\n- {\n- disabled,\n- onAfterBlurWithin,\n- onBeforeBlurWithin,\n- onBlurWithin,\n- onFocusWithin,\n- onFocusWithinChange,\n- onFocusWithinVisibleChange,\n- }: UseFocusWithinOptions,\n-): (focusWithinTarget: null | T) => void {\n- \/\/ Setup controlled state for this useFocus hook\n- const stateRef = useRef({isFocused: false, isFocusVisible: false});\n- const focusHandle = useEvent('focusin');\n- const blurHandle = useEvent('focusout');\n- const afterBlurHandle = useEvent('afterblur');\n- const beforeBlurHandle = useEvent('beforeblur');\n- const focusVisibleHandles = useFocusVisibleInputHandles();\n-\n- const useFocusWithinRef = useCallback(\n- (focusWithinTarget: null | T) => {\n- \/\/ Handle the incoming focusTargetRef. It can be either a function ref\n- \/\/ or an object ref.\n- if (typeof focusWithinTargetRef === 'function') {\n- focusWithinTargetRef(focusWithinTarget);\n- } else {\n- focusWithinTargetRef.current = focusWithinTarget;\n- }\n- const state = stateRef.current;\n-\n- if (focusWithinTarget !== null && state !== null) {\n- \/\/ Handle focus visible\n- setFocusVisibleListeners(\n- focusVisibleHandles,\n- \/\/ $FlowFixMe[incompatible-call] focusWithinTarget is not null here\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- \/\/ $FlowFixMe[incompatible-call] focusWithinTarget is not null here\n- focusHandle.setListener(focusWithinTarget, (event: FocusEvent) => {\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- });\n-\n- \/\/ Handle blur\n- \/\/ $FlowFixMe[incompatible-call] focusWithinTarget is not null here\n- blurHandle.setListener(focusWithinTarget, (event: FocusEvent) => {\n- if (disabled) {\n- return;\n- }\n- const {relatedTarget} = (event.nativeEvent: 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- });\n-\n- \/\/ Handle before blur. This is a special\n- \/\/ React provided event.\n- \/\/ $FlowFixMe[incompatible-call] focusWithinTarget is not null here\n- beforeBlurHandle.setListener(focusWithinTarget, (event: FocusEvent) => {\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(\n- document,\n- (afterBlurEvent: FocusEvent) => {\n- if (onAfterBlurWithin) {\n- onAfterBlurWithin(afterBlurEvent);\n- }\n- \/\/ Clear listener on document\n- afterBlurHandle.setListener(document, null);\n- },\n- );\n- }\n- });\n- }\n- },\n- [\n- afterBlurHandle,\n- beforeBlurHandle,\n- blurHandle,\n- disabled,\n- focusHandle,\n- focusWithinTargetRef,\n- onAfterBlurWithin,\n- onBeforeBlurWithin,\n- onBlurWithin,\n- onFocusWithin,\n- onFocusWithinChange,\n- onFocusWithinVisibleChange,\n- ],\n- );\n-\n- \/\/ Mount\/Unmount logic\n- useFocusLifecycles();\n-\n- return useFocusWithinRef;\n-}\ndiff --git a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocus-test.internal.js b\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocus-test.internal.js\ndeleted file mode 100644\nindex cc456434f9..0000000000\n--- a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocus-test.internal.js\n+++ \/dev\/null\n@@ -1,335 +0,0 @@\n-\/**\n- * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;\n-let useFocus;\n-let act;\n-\n-function initializeModules(hasPointerEvents) {\n- setPointerEvent(hasPointerEvents);\n- jest.resetModules();\n- ReactFeatureFlags = require('shared\/ReactFeatureFlags');\n- ReactFeatureFlags.enableCreateEventHandleAPI = true;\n- React = require('react');\n- ReactDOMClient = require('react-dom\/client');\n- act = require('internal-test-utils').act;\n- \/\/ TODO: This import throws outside of experimental mode. Figure out better\n- \/\/ strategy for gated imports.\n- if (__EXPERIMENTAL__ || global.__WWW__) {\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=%s`, 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- document.body.removeChild(container);\n- container = null;\n- });\n-\n- describe('disabled', () => {\n- let onBlur, onFocus, ref;\n-\n- const componentInit = async () => {\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- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- };\n-\n- \/\/ @gate www\n- it('does not call callbacks', async () => {\n- await 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 = async () => {\n- onBlur = jest.fn();\n- ref = React.createRef();\n- const Component = () => {\n- useFocus(ref, {\n- onBlur,\n- });\n- return

;\n- };\n- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- };\n-\n- \/\/ @gate www\n- it('is called after \"blur\" event', async () => {\n- await 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 = async () => {\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- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- };\n-\n- \/\/ @gate www\n- it('is called after \"focus\" event', async () => {\n- await componentInit();\n- const target = createEventTarget(ref.current);\n- target.focus();\n- expect(onFocus).toHaveBeenCalledTimes(1);\n- });\n-\n- \/\/ @gate www\n- it('is not called if descendants of target receive focus', async () => {\n- await 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 = async () => {\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- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\n- });\n- };\n-\n- \/\/ @gate www\n- it('is called after \"focus\" and \"blur\" if keyboard navigation is active', async () => {\n- await componentInit();\n- const target = createEventTarget(ref.current);\n- const containerTarget = createEventTarget(container);\n- \/\/ use keyboard first\n- containerTarget.keydown({key: 'Tab'});\n- target.focus();\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);\n- expect(onFocusVisibleChange).toHaveBeenCalledWith(true);\n- target.blur({relatedTarget: container});\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);\n- expect(onFocusVisibleChange).toHaveBeenCalledWith(false);\n- });\n-\n- \/\/ @gate www\n- it('is called if non-keyboard event is dispatched on target previously focused with keyboard', async () => {\n- await componentInit();\n- const target = createEventTarget(ref.current);\n- const containerTarget = createEventTarget(container);\n- \/\/ use keyboard first\n- containerTarget.keydown({key: 'Tab'});\n- target.focus();\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);\n- expect(onFocusVisibleChange).toHaveBeenCalledWith(true);\n- \/\/ then use pointer on the target, focus should no longer be visible\n- target.pointerdown();\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);\n- expect(onFocusVisibleChange).toHaveBeenCalledWith(false);\n- \/\/ onFocusVisibleChange should not be called again\n- target.blur({relatedTarget: container});\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);\n- });\n-\n- \/\/ @gate www\n- it('is not called after \"focus\" and \"blur\" events without keyboard', async () => {\n- await componentInit();\n- const target = createEventTarget(ref.current);\n- const containerTarget = createEventTarget(container);\n- target.pointerdown();\n- target.pointerup();\n- containerTarget.pointerdown();\n- target.blur({relatedTarget: container});\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);\n- });\n-\n- \/\/ @gate www\n- it('is not called after \"blur\" and \"focus\" events on descendants', async () => {\n- await componentInit();\n- const innerTarget = createEventTarget(innerRef.current);\n- const containerTarget = createEventTarget(container);\n- containerTarget.keydown({key: 'Tab'});\n- innerTarget.focus();\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);\n- innerTarget.blur({relatedTarget: container});\n- expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);\n- });\n- });\n-\n- describe('nested Focus components', () => {\n- \/\/ @gate www\n- it('propagates events in the correct order', async () => {\n- const events = [];\n- const innerRef = React.createRef();\n- const outerRef = React.createRef();\n- const createEventHandler = msg => () => {\n- events.push(msg);\n- };\n-\n- const Inner = () => {\n- useFocus(innerRef, {\n- onBlur: createEventHandler('inner: onBlur'),\n- onFocus: createEventHandler('inner: onFocus'),\n- onFocusChange: createEventHandler('inner: onFocusChange'),\n- });\n- return

;\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- const root = ReactDOMClient.createRoot(container);\n- await act(() => {\n- root.render();\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\/create-event-handle\/__tests__\/useFocusWithin-test.internal.js b\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocusWithin-test.internal.js\ndeleted file mode 100644\nindex f77dd5b779..0000000000\n--- a\/packages\/react-interactions\/events\/src\/dom\/create-event-handle\/__tests__\/useFocusWithin-test.internal.js\n+++ \/dev\/null\n@@ -1,626 +0,0 @@\n-\/**\n- * Copyright (c) Meta Platforms, Inc. and 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 ReactDOMClient;\n-let useFocusWithin;\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.enableCreateEventHandleAPI = true;\n- React = require('react');\n- ReactDOMClient = require('react-dom\/client');\n- act = require('internal-test-utils').act;\n-\n- \/\/ TODO: This import throws outside of experimental mode. Figure out better\n- \/\/ strategy for gated imports.\n- if (__EXPERIMENTAL__ || global.__WWW__) {\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- let container2;\n- let root;\n-\n- beforeEach(() => {\n- initializeModules(hasPointerEvents);\n- container = document.createElement('div');\n- document.body.appendChild(container);\n- container2 = document.createElement('div');\n- document.body.appendChild(container2);\n- root = ReactDOMClient.createRoot(container);\n- });\n-\n- afterEach(async () => {\n- await act(() => {\n- root.render(null);\n- });\n-\n- document.body.removeChild(container);\n- document.body.removeChild(container2);\n- container = null;\n- container2 = null;\n- });\n-\n- describe('disabled', () => {\n- let onFocusWithinChange, onFocusWithinVisibleChange, ref;\n-\n- const componentInit = async () => {\n- onFocusWithinChange = jest.fn();\n- onFocusWithinVisibleChange = jest.fn();\n- ref = React.createRef();\n- const Component = () => {\n- const focusWithinRef = useFocusWithin(ref, {\n- disabled: true,\n- onFocusWithinChange,\n- onFocusWithinVisibleChange,\n- });\n- return

;\n- };\n- await act(() => {\n- root.render();\n- });\n- };\n-\n- \/\/ @gate www\n- it('prevents custom events being dispatched', async () => {\n- await 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- const focusWithinRef = useFocusWithin(ref, {\n- onFocusWithinChange,\n- });\n- return (\n-

\n- {show && }\n-

\n- <\/div>\n- );\n- };\n-\n- const componentInit = async () => {\n- onFocusWithinChange = jest.fn();\n- ref = React.createRef();\n- innerRef = React.createRef();\n- innerRef2 = React.createRef();\n- await act(() => {\n- root.render();\n- });\n- };\n-\n- \/\/ @gate www\n- it('is called after \"blur\" and \"focus\" events on focus target', async () => {\n- await componentInit();\n- const target = createEventTarget(ref.current);\n- target.focus();\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);\n- expect(onFocusWithinChange).toHaveBeenCalledWith(true);\n- target.blur({relatedTarget: container});\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(2);\n- expect(onFocusWithinChange).toHaveBeenCalledWith(false);\n- });\n-\n- \/\/ @gate www\n- it('is called after \"blur\" and \"focus\" events on descendants', async () => {\n- await componentInit();\n- const target = createEventTarget(innerRef.current);\n- target.focus();\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);\n- expect(onFocusWithinChange).toHaveBeenCalledWith(true);\n- target.blur({relatedTarget: container});\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(2);\n- expect(onFocusWithinChange).toHaveBeenCalledWith(false);\n- });\n-\n- \/\/ @gate www\n- it('is only called once when focus moves within and outside the subtree', async () => {\n- await componentInit();\n- const node = ref.current;\n- const innerNode1 = innerRef.current;\n- const innerNode2 = innerRef.current;\n- const target = createEventTarget(node);\n- const innerTarget1 = createEventTarget(innerNode1);\n- const innerTarget2 = createEventTarget(innerNode2);\n-\n- \/\/ focus shifts into subtree\n- innerTarget1.focus();\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);\n- expect(onFocusWithinChange).toHaveBeenCalledWith(true);\n- \/\/ focus moves around subtree\n- innerTarget1.blur({relatedTarget: innerNode2});\n- innerTarget2.focus();\n- innerTarget2.blur({relatedTarget: node});\n- target.focus();\n- target.blur({relatedTarget: innerNode1});\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(1);\n- \/\/ focus shifts outside subtree\n- innerTarget1.blur({relatedTarget: container});\n- expect(onFocusWithinChange).toHaveBeenCalledTimes(2);\n- expect(onFocusWithinChange).toHaveBeenCalledWith(false);\n- });\n- });\n-\n- describe('onFocusWithinVisibleChange', () => {\n- let onFocusWithinVisibleChange, ref, innerRef, innerRef2;\n-\n- const Component = ({show}) => {\n- const focusWithinRef = useFocusWithin(ref, {\n- onFocusWithinVisibleChange,\n- });\n- return (\n-

\n- {show && }\n-

\n- \n- <\/div>\n- );\n- };\n- await act(() => {\n- root.render();\n- });\n-\n- const target = createEventTarget(inputRef.current);\n- \/\/ focus the target\n- target.pointerdown();\n- target.focus();\n- target.keydown({key: 'a'});\n- expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);\n- });\n-\n- describe('onBeforeBlurWithin', () => {\n- let onBeforeBlurWithin, onAfterBlurWithin, ref, innerRef, innerRef2;\n-\n- beforeEach(() => {\n- onBeforeBlurWithin = jest.fn();\n- onAfterBlurWithin = jest.fn(e => {\n- e.persist();\n- });\n- ref = React.createRef();\n- innerRef = React.createRef();\n- innerRef2 = React.createRef();\n- });\n-\n- \/\/ @gate www\n- it('is called after a focused element is unmounted', async () => {\n- const Component = ({show}) => {\n- const focusWithinRef = useFocusWithin(ref, {\n- onBeforeBlurWithin,\n- onAfterBlurWithin,\n- });\n- return (\n-

\n- {show && }\n-

\n- <\/div>\n- );\n- };\n-\n- await act(() => {\n- root.render();\n- });\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- await act(() => {\n- root.render();\n- });\n-\n- expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);\n- expect(onAfterBlurWithin).toHaveBeenCalledTimes(1);\n- expect(onAfterBlurWithin).toHaveBeenCalledWith(\n- expect.objectContaining({relatedTarget: inner}),\n- );\n- });\n-\n- \/\/ @gate www\n- it('is called after a nested focused element is unmounted', async () => {\n- const Component = ({show}) => {\n- const focusWithinRef = useFocusWithin(ref, {\n- onBeforeBlurWithin,\n- onAfterBlurWithin,\n- });\n- return (\n-