@react-aria/focus 3.21.4 → 3.22.0

package/src/useFocusRing.ts

@@ -1,79 +0,0 @@
-import {DOMAttributes} from '@react-types/shared';
-import {isFocusVisible, useFocus, useFocusVisibleListener, useFocusWithin} from '@react-aria/interactions';
-import {useCallback, useRef, useState} from 'react';
-
-export interface AriaFocusRingProps {
-  /**
-   * Whether to show the focus ring when something
-   * inside the container element has focus (true), or
-   * only if the container itself has focus (false).
-   * @default 'false'
-   */
-  within?: boolean,
-
-  /** Whether the element is a text input. */
-  isTextInput?: boolean,
-
-  /** Whether the element will be auto focused. */
-  autoFocus?: boolean
-}
-
-export interface FocusRingAria {
-  /** Whether the element is currently focused. */
-  isFocused: boolean,
-
-  /** Whether keyboard focus should be visible. */
-  isFocusVisible: boolean,
-
-  /** Props to apply to the container element with the focus ring. */
-  focusProps: DOMAttributes
-}
-
-/**
- * Determines whether a focus ring should be shown to indicate keyboard focus.
- * Focus rings are visible only when the user is interacting with a keyboard,
- * not with a mouse, touch, or other input methods.
- */
-export function useFocusRing(props: AriaFocusRingProps = {}): FocusRingAria {
-  let {
-    autoFocus = false,
-    isTextInput,
-    within
-  } = props;
-  let state = useRef({
-    isFocused: false,
-    isFocusVisible: autoFocus || isFocusVisible()
-  });
-  let [isFocused, setFocused] = useState(false);
-  let [isFocusVisibleState, setFocusVisible] = useState(() => state.current.isFocused && state.current.isFocusVisible);
-
-  let updateState = useCallback(() => setFocusVisible(state.current.isFocused && state.current.isFocusVisible), []);
-
-  let onFocusChange = useCallback(isFocused => {
-    state.current.isFocused = isFocused;
-    state.current.isFocusVisible = isFocusVisible();
-    setFocused(isFocused);
-    updateState();
-  }, [updateState]);
-
-  useFocusVisibleListener((isFocusVisible) => {
-    state.current.isFocusVisible = isFocusVisible;
-    updateState();
-  }, [isTextInput, isFocused], {enabled: isFocused, isTextInput});
-
-  let {focusProps} = useFocus({
-    isDisabled: within,
-    onFocusChange
-  });
-
-  let {focusWithinProps} = useFocusWithin({
-    isDisabled: !within,
-    onFocusWithinChange: onFocusChange
-  });
-
-  return {
-    isFocused,
-    isFocusVisible: isFocusVisibleState,
-    focusProps: within ? focusWithinProps : focusProps
-  };
-}

package/src/useHasTabbableChild.ts

@@ -1,66 +0,0 @@
-/*
- * Copyright 2022 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 {getFocusableTreeWalker} from './FocusScope';
-import {RefObject} from '@react-types/shared';
-import {useLayoutEffect} from '@react-aria/utils';
-import {useState} from 'react';
-
-interface AriaHasTabbableChildOptions {
-  isDisabled?: boolean
-}
-
-// This was created for a special empty case of a component that can have child or
-// be empty, like Collection/Virtualizer/Table/ListView/etc. When these components
-// are empty they can have a message with a tabbable element, which is like them
-// being not empty, when it comes to focus and tab order.
-
-/**
- * Returns whether an element has a tabbable child, and updates as children change.
- * @private
- */
-export function useHasTabbableChild(ref: RefObject<Element | null>, options?: AriaHasTabbableChildOptions): boolean {
-  let isDisabled = options?.isDisabled;
-  let [hasTabbableChild, setHasTabbableChild] = useState(false);
-
-  useLayoutEffect(() => {
-    if (ref?.current && !isDisabled) {
-      let update = () => {
-        if (ref.current) {
-          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-          setHasTabbableChild(!!walker.nextNode());
-        }
-      };
-
-      update();
-
-      // Update when new elements are inserted, or the tabIndex/disabled attribute updates.
-      let observer = new MutationObserver(update);
-      observer.observe(ref.current, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ['tabIndex', 'disabled']
-      });
-
-      return () => {
-        // Disconnect mutation observer when a React update occurs on the top-level component
-        // so we update synchronously after re-rendering. Otherwise React will emit act warnings
-        // in tests since mutation observers fire asynchronously. The mutation observer is necessary
-        // so we also update if a child component re-renders and adds/removes something tabbable.
-        observer.disconnect();
-      };
-    }
-  });
-
-  return isDisabled ? false : hasTabbableChild;
-}

package/src/virtualFocus.ts

@@ -1,33 +0,0 @@
-import {getActiveElement, getOwnerDocument} from '@react-aria/utils';
-
-export function moveVirtualFocus(to: Element | null): void {
-  let from = getVirtuallyFocusedElement(getOwnerDocument(to));
-  if (from !== to) {
-    if (from) {
-      dispatchVirtualBlur(from, to);
-    }
-    if (to) {
-      dispatchVirtualFocus(to, from);
-    }
-  }
-}
-
-export function dispatchVirtualBlur(from: Element, to: Element | null): void {
-  from.dispatchEvent(new FocusEvent('blur', {relatedTarget: to}));
-  from.dispatchEvent(new FocusEvent('focusout', {bubbles: true, relatedTarget: to}));
-}
-
-export function dispatchVirtualFocus(to: Element, from: Element | null): void {
-  to.dispatchEvent(new FocusEvent('focus', {relatedTarget: from}));
-  to.dispatchEvent(new FocusEvent('focusin', {bubbles: true, relatedTarget: from}));
-}
-
-export function getVirtuallyFocusedElement(document: Document): Element | null {
-  let activeElement = getActiveElement(document);
-  let activeDescendant = activeElement?.getAttribute('aria-activedescendant');
-  if (activeDescendant) {
-    return document.getElementById(activeDescendant) || activeElement;
-  }
-
-  return activeElement;
-}