@react-aria/interactions 3.27.1 → 3.28.0

package/src/useFocusVisible.ts

@@ -1,359 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-// Portions of the code in this file are based on code from react.
-// Original licensing for the following can be found in the
-// NOTICE file in the root directory of this source tree.
-// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
-
-import {getActiveElement, getEventTarget, getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
-import {ignoreFocusEvent} from './utils';
-import {PointerType} from '@react-types/shared';
-import {useEffect, useState} from 'react';
-import {useIsSSR} from '@react-aria/ssr';
-
-export type Modality = 'keyboard' | 'pointer' | 'virtual';
-type HandlerEvent = PointerEvent | MouseEvent | KeyboardEvent | FocusEvent | null;
-type Handler = (modality: Modality, e: HandlerEvent) => void;
-export type FocusVisibleHandler = (isFocusVisible: boolean) => void;
-export interface FocusVisibleProps {
-  /** Whether the element is a text input. */
-  isTextInput?: boolean,
-  /** Whether the element will be auto focused. */
-  autoFocus?: boolean
-}
-
-export interface FocusVisibleResult {
-  /** Whether keyboard focus is visible globally. */
-  isFocusVisible: boolean
-}
-
-let currentModality: null | Modality = null;
-let currentPointerType: PointerType = 'keyboard';
-export const changeHandlers = new Set<Handler>();
-interface GlobalListenerData {
-  focus: () => void
-}
-export let hasSetupGlobalListeners: Map<Window, GlobalListenerData> = new Map<Window, GlobalListenerData>(); // We use a map here to support setting event listeners across multiple document objects.
-let hasEventBeforeFocus = false;
-let hasBlurredWindowRecently = false;
-
-// Only Tab or Esc keys will make focus visible on text input elements
-const FOCUS_VISIBLE_INPUT_KEYS = {
-  Tab: true,
-  Escape: true
-};
-
-function triggerChangeHandlers(modality: Modality, e: HandlerEvent) {
-  for (let handler of changeHandlers) {
-    handler(modality, e);
-  }
-}
-
-/**
- * Helper function to determine if a KeyboardEvent is unmodified and could make keyboard focus styles visible.
- */
-function isValidKey(e: KeyboardEvent) {
-  // Control and Shift keys trigger when navigating back to the tab with keyboard.
-  return !(e.metaKey || (!isMac() && e.altKey) || e.ctrlKey || e.key === 'Control' || e.key === 'Shift' || e.key === 'Meta');
-}
-
-
-function handleKeyboardEvent(e: KeyboardEvent) {
-  hasEventBeforeFocus = true;
-  if (!(openLink as any).isOpening && isValidKey(e)) {
-    currentModality = 'keyboard';
-    currentPointerType = 'keyboard';
-    triggerChangeHandlers('keyboard', e);
-  }
-}
-
-function handlePointerEvent(e: PointerEvent | MouseEvent) {
-  currentModality = 'pointer';
-  currentPointerType = 'pointerType' in e ? e.pointerType as PointerType : 'mouse';
-  if (e.type === 'mousedown' || e.type === 'pointerdown') {
-    hasEventBeforeFocus = true;
-    triggerChangeHandlers('pointer', e);
-  }
-}
-
-function handleClickEvent(e: MouseEvent) {
-  if (!(openLink as any).isOpening && isVirtualClick(e)) {
-    hasEventBeforeFocus = true;
-    currentModality = 'virtual';
-    currentPointerType = 'virtual';
-  }
-}
-
-function handleFocusEvent(e: FocusEvent) {
-  // 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 (getEventTarget(e) === window || getEventTarget(e) === document || ignoreFocusEvent || !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 (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
-    currentModality = 'virtual';
-    currentPointerType = 'virtual';
-    triggerChangeHandlers('virtual', e);
-  }
-
-  hasEventBeforeFocus = false;
-  hasBlurredWindowRecently = false;
-}
-
-function handleWindowBlur() {
-  if (ignoreFocusEvent) {
-    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.
-  hasEventBeforeFocus = false;
-  hasBlurredWindowRecently = true;
-}
-
-/**
- * Setup global event listeners to control when keyboard focus style should be visible.
- */
-function setupGlobalFocusEvents(element?: HTMLElement | null) {
-  if (typeof window === 'undefined' || typeof document === 'undefined' || hasSetupGlobalListeners.get(getOwnerWindow(element))) {
-    return;
-  }
-
-  const windowObject = getOwnerWindow(element);
-  const documentObject = getOwnerDocument(element);
-
-  // Programmatic focus() calls shouldn't affect the current input modality.
-  // However, we need to detect other cases when a focus event occurs without
-  // a preceding user event (e.g. screen reader focus). Overriding the focus
-  // method on HTMLElement.prototype is a bit hacky, but works.
-  let focus = windowObject.HTMLElement.prototype.focus;
-  windowObject.HTMLElement.prototype.focus = function () {
-    hasEventBeforeFocus = true;
-    focus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);
-  };
-
-  documentObject.addEventListener('keydown', handleKeyboardEvent, true);
-  documentObject.addEventListener('keyup', handleKeyboardEvent, true);
-  documentObject.addEventListener('click', handleClickEvent, true);
-
-  // Register focus events on the window so they are sure to happen
-  // before React's event listeners (registered on the document).
-  windowObject.addEventListener('focus', handleFocusEvent, true);
-  windowObject.addEventListener('blur', handleWindowBlur, false);
-
-  if (typeof PointerEvent !== 'undefined') {
-    documentObject.addEventListener('pointerdown', handlePointerEvent, true);
-    documentObject.addEventListener('pointermove', handlePointerEvent, true);
-    documentObject.addEventListener('pointerup', handlePointerEvent, true);
-  } else if (process.env.NODE_ENV === 'test') {
-    documentObject.addEventListener('mousedown', handlePointerEvent, true);
-    documentObject.addEventListener('mousemove', handlePointerEvent, true);
-    documentObject.addEventListener('mouseup', handlePointerEvent, true);
-  }
-
-  // Add unmount handler
-  windowObject.addEventListener('beforeunload', () => {
-    tearDownWindowFocusTracking(element);
-  }, {once: true});
-
-  hasSetupGlobalListeners.set(windowObject, {focus});
-}
-
-const tearDownWindowFocusTracking = (element, loadListener?: () => void) => {
-  const windowObject = getOwnerWindow(element);
-  const documentObject = getOwnerDocument(element);
-  if (loadListener) {
-    documentObject.removeEventListener('DOMContentLoaded', loadListener);
-  }
-  if (!hasSetupGlobalListeners.has(windowObject)) {
-    return;
-  }
-  windowObject.HTMLElement.prototype.focus = hasSetupGlobalListeners.get(windowObject)!.focus;
-
-  documentObject.removeEventListener('keydown', handleKeyboardEvent, true);
-  documentObject.removeEventListener('keyup', handleKeyboardEvent, true);
-  documentObject.removeEventListener('click', handleClickEvent, true);
-
-  windowObject.removeEventListener('focus', handleFocusEvent, true);
-  windowObject.removeEventListener('blur', handleWindowBlur, false);
-
-  if (typeof PointerEvent !== 'undefined') {
-    documentObject.removeEventListener('pointerdown', handlePointerEvent, true);
-    documentObject.removeEventListener('pointermove', handlePointerEvent, true);
-    documentObject.removeEventListener('pointerup', handlePointerEvent, true);
-  } else if (process.env.NODE_ENV === 'test') {
-    documentObject.removeEventListener('mousedown', handlePointerEvent, true);
-    documentObject.removeEventListener('mousemove', handlePointerEvent, true);
-    documentObject.removeEventListener('mouseup', handlePointerEvent, true);
-  }
-
-  hasSetupGlobalListeners.delete(windowObject);
-};
-
-/**
- * EXPERIMENTAL
- * Adds a window (i.e. iframe) to the list of windows that are being tracked for focus visible.
- *
- * Sometimes apps render portions of their tree into an iframe. In this case, we cannot accurately track if the focus
- * is visible because we cannot see interactions inside the iframe. If you have this in your application's architecture,
- * then this function will attach event listeners inside the iframe. You should call `addWindowFocusTracking` with an
- * element from inside the window you wish to add. We'll retrieve the relevant elements based on that.
- * Note, you do not need to call this for the default window, as we call it for you.
- *
- * When you are ready to stop listening, but you do not wish to unmount the iframe, you may call the cleanup function
- * returned by `addWindowFocusTracking`. Otherwise, when you unmount the iframe, all listeners and state will be cleaned
- * up automatically for you.
- *
- * @param element @default document.body - The element provided will be used to get the window to add.
- * @returns A function to remove the event listeners and cleanup the state.
- */
-export function addWindowFocusTracking(element?: HTMLElement | null): () => void {
-  const documentObject = getOwnerDocument(element);
-  let loadListener;
-  if (documentObject.readyState !== 'loading') {
-    setupGlobalFocusEvents(element);
-  } else {
-    loadListener = () => {
-      setupGlobalFocusEvents(element);
-    };
-    documentObject.addEventListener('DOMContentLoaded', loadListener);
-  }
-
-  return () => tearDownWindowFocusTracking(element, loadListener);
-}
-
-// Server-side rendering does not have the document object defined
-// eslint-disable-next-line no-restricted-globals
-if (typeof document !== 'undefined') {
-  addWindowFocusTracking();
-}
-
-/**
- * If true, keyboard focus is visible.
- */
-export function isFocusVisible(): boolean {
-  return currentModality !== 'pointer';
-}
-
-export function getInteractionModality(): Modality | null {
-  return currentModality;
-}
-
-export function setInteractionModality(modality: Modality): void {
-  currentModality = modality;
-  currentPointerType = modality === 'pointer' ? 'mouse' : modality;
-  triggerChangeHandlers(modality, null);
-}
-
-/** @private */
-export function getPointerType(): PointerType {
-  return currentPointerType;
-}
-
-/**
- * Keeps state of the current modality.
- */
-export function useInteractionModality(): Modality | null {
-  setupGlobalFocusEvents();
-
-  let [modality, setModality] = useState(currentModality);
-  useEffect(() => {
-    let handler = () => {
-      setModality(currentModality);
-    };
-
-    changeHandlers.add(handler);
-    return () => {
-      changeHandlers.delete(handler);
-    };
-  }, []);
-
-  return useIsSSR() ? null : modality;
-}
-
-const nonTextInputTypes = new Set([
-  'checkbox',
-  'radio',
-  'range',
-  'color',
-  'file',
-  'image',
-  'button',
-  'submit',
-  'reset'
-]);
-
-/**
- * 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 isKeyboardFocusEvent(isTextInput: boolean, modality: Modality, e: HandlerEvent) {
-  let document = getOwnerDocument(e ? getEventTarget(e) as Element : undefined);
-  let eventTarget = e ? getEventTarget(e) as Element : undefined;
-  const IHTMLInputElement = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).HTMLInputElement : HTMLInputElement;
-  const IHTMLTextAreaElement = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).HTMLTextAreaElement : HTMLTextAreaElement;
-  const IHTMLElement = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).HTMLElement : HTMLElement;
-  const IKeyboardEvent = typeof window !== 'undefined' ? getOwnerWindow(eventTarget).KeyboardEvent : KeyboardEvent;
-
-  // 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
-  let activeElement = getActiveElement(document);
-  isTextInput = isTextInput ||
-    (activeElement instanceof IHTMLInputElement && !nonTextInputTypes.has(activeElement.type)) ||
-    activeElement instanceof IHTMLTextAreaElement ||
-    (activeElement instanceof IHTMLElement && activeElement.isContentEditable);
-  return !(isTextInput && modality === 'keyboard' && e instanceof IKeyboardEvent && !FOCUS_VISIBLE_INPUT_KEYS[e.key]);
-}
-
-/**
- * Manages focus visible state for the page, and subscribes individual components for updates.
- */
-export function useFocusVisible(props: FocusVisibleProps = {}): FocusVisibleResult {
-  let {isTextInput, autoFocus} = props;
-  let [isFocusVisibleState, setFocusVisible] = useState(autoFocus || isFocusVisible());
-  useFocusVisibleListener((isFocusVisible) => {
-    setFocusVisible(isFocusVisible);
-  }, [isTextInput], {isTextInput});
-
-  return {isFocusVisible: isFocusVisibleState};
-}
-
-/**
- * Listens for trigger change and reports if focus is visible (i.e., modality is not pointer).
- */
-export function useFocusVisibleListener(fn: FocusVisibleHandler, deps: ReadonlyArray<any>, opts?: {enabled?: boolean, isTextInput?: boolean}): void {
-  setupGlobalFocusEvents();
-
-  useEffect(() => {
-    if (opts?.enabled === false) {
-      return;
-    }
-    let handler = (modality: Modality, e: HandlerEvent) => {
-      // We want to early return for any keyboard events that occur inside text inputs EXCEPT for Tab and Escape
-      if (!isKeyboardFocusEvent(!!(opts?.isTextInput), modality, e)) {
-        return;
-      }
-      fn(isFocusVisible());
-    };
-    changeHandlers.add(handler);
-    return () => {
-      changeHandlers.delete(handler);
-    };
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, deps);
-}
-

package/src/useFocusWithin.ts

@@ -1,134 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-// Portions of the code in this file are based on code from react.
-// Original licensing for the following can be found in the
-// NOTICE file in the root directory of this source tree.
-// See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
-
-import {createSyntheticEvent, setEventTarget, useSyntheticBlurEvent} from './utils';
-import {DOMAttributes} from '@react-types/shared';
-import {FocusEvent, useCallback, useRef} from 'react';
-import {getActiveElement, getEventTarget, getOwnerDocument, nodeContains, useGlobalListeners} from '@react-aria/utils';
-
-export interface FocusWithinProps {
-  /** Whether the focus within events should be disabled. */
-  isDisabled?: boolean,
-  /** Handler that is called when the target element or a descendant receives focus. */
-  onFocusWithin?: (e: FocusEvent) => void,
-  /** Handler that is called when the target element and all descendants lose focus. */
-  onBlurWithin?: (e: FocusEvent) => void,
-  /** Handler that is called when the the focus within state changes. */
-  onFocusWithinChange?: (isFocusWithin: boolean) => void
-}
-
-export interface FocusWithinResult {
-  /** Props to spread onto the target element. */
-  focusWithinProps: DOMAttributes
-}
-
-/**
- * Handles focus events for the target and its descendants.
- */
-export function useFocusWithin(props: FocusWithinProps): FocusWithinResult {
-  let {
-    isDisabled,
-    onBlurWithin,
-    onFocusWithin,
-    onFocusWithinChange
-  } = props;
-  let state = useRef({
-    isFocusWithin: false
-  });
-
-  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
-
-  let onBlur = useCallback((e: FocusEvent) => {
-    // Ignore events bubbling through portals.
-    if (!nodeContains(e.currentTarget, getEventTarget(e))) {
-      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 && !nodeContains(e.currentTarget as Element, e.relatedTarget as Element)) {
-      state.current.isFocusWithin = false;
-      removeAllGlobalListeners();
-
-      if (onBlurWithin) {
-        onBlurWithin(e);
-      }
-
-      if (onFocusWithinChange) {
-        onFocusWithinChange(false);
-      }
-    }
-  }, [onBlurWithin, onFocusWithinChange, state, removeAllGlobalListeners]);
-
-  let onSyntheticFocus = useSyntheticBlurEvent(onBlur);
-  let onFocus = useCallback((e: FocusEvent) => {
-    // Ignore events bubbling through portals.
-    if (!nodeContains(e.currentTarget, getEventTarget(e))) {
-      return;
-    }
-
-    // Double check that document.activeElement actually matches e.target in case a previously chained
-    // focus handler already moved focus somewhere else.
-    let eventTarget = getEventTarget(e);
-    const ownerDocument = getOwnerDocument(eventTarget);
-    const activeElement = getActiveElement(ownerDocument);
-    if (!state.current.isFocusWithin && activeElement === eventTarget) {
-      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 => {
-        let eventTarget = getEventTarget(e);
-        if (state.current.isFocusWithin && !nodeContains(currentTarget, eventTarget as Element)) {
-          let nativeEvent = new ownerDocument.defaultView!.FocusEvent('blur', {relatedTarget: eventTarget});
-          setEventTarget(nativeEvent, currentTarget);
-          let event = createSyntheticEvent<FocusEvent>(nativeEvent);
-          onBlur(event);
-        }
-      }, {capture: true});
-    }
-  }, [onFocusWithin, onFocusWithinChange, onSyntheticFocus, addGlobalListener, onBlur]);
-
-  if (isDisabled) {
-    return {
-      focusWithinProps: {
-        // These cannot be null, that would conflict in mergeProps
-        onFocus: undefined,
-        onBlur: undefined
-      }
-    };
-  }
-
-  return {
-    focusWithinProps: {
-      onFocus,
-      onBlur
-    }
-  };
-}

package/src/useFocusable.tsx

@@ -1,191 +0,0 @@
-/*
- * 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.
- */
-
-import {DOMAttributes, FocusableDOMProps, FocusableElement, FocusableProps, RefObject} from '@react-types/shared';
-import {focusSafely} from './';
-import {getOwnerWindow, isFocusable, mergeProps, mergeRefs, useObjectRef, useSyncRef} from '@react-aria/utils';
-import React, {ForwardedRef, forwardRef, MutableRefObject, ReactElement, ReactNode, useContext, useEffect, useRef} from 'react';
-import {useFocus} from './useFocus';
-import {useKeyboard} from './useKeyboard';
-
-export interface FocusableOptions<T = FocusableElement> extends FocusableProps<T>, FocusableDOMProps {
-  /** Whether focus should be disabled. */
-  isDisabled?: boolean
-}
-
-export interface FocusableProviderProps extends DOMAttributes {
-  /** The child element to provide DOM props to. */
-  children?: ReactNode
-}
-
-interface FocusableContextValue extends FocusableProviderProps {
-  ref?: MutableRefObject<FocusableElement | null>
-}
-
-// Exported for @react-aria/collections, which forwards this context.
-/** @private */
-export let FocusableContext: React.Context<FocusableContextValue | null> = React.createContext<FocusableContextValue | null>(null);
-
-function useFocusableContext(ref: RefObject<FocusableElement | null>): FocusableContextValue {
-  let context = useContext(FocusableContext) || {};
-  useSyncRef(context, ref);
-
-  // eslint-disable-next-line
-  let {ref: _, ...otherProps} = context;
-  return otherProps;
-}
-
-/**
- * Provides DOM props to the nearest focusable child.
- */
-export const FocusableProvider:
-  React.ForwardRefExoticComponent<FocusableProviderProps & React.RefAttributes<FocusableElement>> =
-React.forwardRef(function FocusableProvider(props: FocusableProviderProps, ref: ForwardedRef<FocusableElement>) {
-  let {children, ...otherProps} = props;
-  let objRef = useObjectRef(ref);
-  let context = {
-    ...otherProps,
-    ref: objRef
-  };
-
-  return (
-    <FocusableContext.Provider value={context}>
-      {children}
-    </FocusableContext.Provider>
-  );
-});
-
-export interface FocusableAria {
-  /** Props for the focusable element. */
-  focusableProps: DOMAttributes
-}
-
-/**
- * Used to make an element focusable and capable of auto focus.
- */
-export function useFocusable<T extends FocusableElement = FocusableElement>(props: FocusableOptions<T>, domRef: RefObject<FocusableElement | null>): FocusableAria {
-  let {focusProps} = useFocus(props);
-  let {keyboardProps} = useKeyboard(props);
-  let interactions = mergeProps(focusProps, keyboardProps);
-  let domProps = useFocusableContext(domRef);
-  let interactionProps = props.isDisabled ? {} : domProps;
-  let autoFocusRef = useRef(props.autoFocus);
-
-  useEffect(() => {
-    if (autoFocusRef.current && domRef.current) {
-      focusSafely(domRef.current);
-    }
-    autoFocusRef.current = false;
-  }, [domRef]);
-
-  // Always set a tabIndex so that Safari allows focusing native buttons and inputs.
-  let tabIndex: number | undefined = props.excludeFromTabOrder ? -1 : 0;
-  if (props.isDisabled) {
-    tabIndex = undefined;
-  }
-
-  return {
-    focusableProps: mergeProps(
-      {
-        ...interactions,
-        tabIndex
-      },
-      interactionProps
-    )
-  };
-}
-
-export interface FocusableComponentProps extends FocusableOptions {
-  children: ReactElement<DOMAttributes, string>
-}
-
-export const Focusable:
-  React.ForwardRefExoticComponent<FocusableComponentProps & React.RefAttributes<FocusableElement>> =
-forwardRef(({children, ...props}: FocusableComponentProps, ref: ForwardedRef<FocusableElement>) => {
-  ref = useObjectRef(ref);
-  let {focusableProps} = useFocusable(props, ref);
-  let child = React.Children.only(children);
-
-  useEffect(() => {
-    if (process.env.NODE_ENV === 'production') {
-      return;
-    }
-
-    let el = ref.current;
-    if (!el || !(el instanceof getOwnerWindow(el).Element)) {
-      console.error('<Focusable> child must forward its ref to a DOM element.');
-      return;
-    }
-
-    if (!props.isDisabled && !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(React.version, 10) < 19 ? child.ref : child.props.ref;
-
-  return React.cloneElement(
-    child,
-    {
-      ...mergeProps(focusableProps, child.props),
-      // @ts-ignore
-      ref: mergeRefs(childRef, ref)
-    }
-  );
-});