Function useFocusable

packages/react-aria/src/interactions/useFocusable.tsx:96–129

(
  props: FocusableOptions<T>,
  domRef: RefObject<FocusableElement | null>
)

 * 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>;